bilibili H5播放器快捷操作

快捷键设置,回车快速发弹幕,双击全屏,自动选择最高清画质、播放、全屏、关闭弹幕、自动转跳和自动关灯等

// ==UserScript==
// @name         bilibili H5播放器快捷操作
// @namespace    https://github.com/jeayu/bilibili-quickdo
// @version      0.9.9.9
// @description  快捷键设置,回车快速发弹幕,双击全屏,自动选择最高清画质、播放、全屏、关闭弹幕、自动转跳和自动关灯等
// @author       jeayu
// @license      MIT
// @match        *://www.bilibili.com/video/av*
// @match        *://www.bilibili.com/video/bv*
// @match        *://www.bilibili.com/video/BV*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function () {
    'use strict';
    const q = function (selector) {
        let nodes = [];
        if (typeof selector === 'string') {
            Object.assign(nodes, document.querySelectorAll(selector));
            nodes.selectorStr = selector;
        } else if (selector instanceof NodeList) {
            Object.assign(nodes, selector);
        } else if (selector instanceof Node) {
            nodes = [selector];
        }
        nodes.click = function (index = 0) {
            nodes.length > index && nodes[index].click();
            return this;
        }
        nodes.addClass = function (classes, index = 0) {
            nodes.length > index && nodes[index].classList.add(classes);
            return this;
        }
        nodes.removeClass = function (classes, index = 0) {
            nodes.length > index && nodes[index].classList.remove(classes);
            return this;
        }
        nodes.text = function (index = 0) {
            return nodes.length > index && nodes[index].textContent || '';
        }
        nodes.css = function (name, value, index = 0) {
            nodes.length > index && nodes[index].style.setProperty(name, value);
            return this;
        }
        nodes.getCss = function (name, index = 0) {
            return nodes.length > index && nodes[index].ownerDocument.defaultView.getComputedStyle(nodes[index], null).getPropertyValue(name);
        }
        nodes.mouseover = function (index = 0) {
            return this.trigger('mouseover', index);
        }
        nodes.mouseout = function (index = 0) {
            return this.trigger('mouseout', index);
        }
        nodes.attr = function (name, index = 0) {
            const result = nodes.length > index ? nodes[index].attributes[name] : undefined;
            return result && result.value;
        }
        nodes.hasClass = function (className, index = 0) {
            return nodes.length > index && nodes[index].className.match && (nodes[index].className.match(new RegExp(`(\\s|^)${className}(\\s|$)`)) != null);
        }
        nodes.append = function (text, where = 'beforeend', index = 0) {
            nodes.length > index && nodes[index].insertAdjacentHTML(where, text);
            return this;
        }
        nodes.find = function (name, index = 0) {
            return q(nodes[index].querySelectorAll(name));
        }
        nodes.toggleClass = function (className, flag, index = 0) {
            return flag ? this.addClass(className, index) : this.removeClass(className, index);
        }
        nodes.next = function (index = 0) {
            return nodes.length > index && nodes[index].nextElementSibling ? q(nodes[index].nextElementSibling) : [];
        }
        nodes.prev = function (index = 0) {
            return nodes.length > index && nodes[index].previousElementSibling ? q(nodes[index].previousElementSibling) : [];
        }
        nodes.trigger = function (event, index = 0) {
            if (nodes.length > index) {
                const evt = document.createEvent('Event');
                evt.initEvent(event, true, true);
                nodes[index].dispatchEvent(evt);
            }
            return this;
        }
        nodes.last = function () {
            return q(nodes[nodes.length - 1]);
        }
        nodes.on = function (event, fn, useCapture=false, index = 0) {
            nodes.length > index && nodes[index].addEventListener(event, fn, useCapture);
            return this;
        }
        nodes.select = function (index = 0) {
            nodes.length > index && nodes[index].select();
            return this;
        }
        nodes.blur = function (index = 0) {
            nodes.length > index && nodes[index].blur();
            return this;
        }
        nodes.val = function (value, index = 0) {
            if (value) {
                nodes[index].value = value;
                return this;
            }
            return nodes[index].value;
        }
        nodes.offset = function (index = 0) {
            if (nodes.length <= index) {
                return {top: 0, left: 0};
            }
            const rect = nodes[index].getBoundingClientRect();
            return {top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft}
        }
        nodes.parseFloat = function (css, index = 0) {
            return (parseFloat(this.getCss(css, index)) || 0);
        }
        nodes.after = function (node, index = 0) {
            nodes.length > index && node instanceof Node && nodes[index].parentNode.insertBefore(node, nodes[index]);
            return this;
        }
        return nodes;
    }
    const SELECTOR = {
        h5Player: "#bilibili-player video",
        playerContainer: ".bpx-player-container",
        playerControl: ".bpx-player-control-wrap",
        senderBarArea: ".bpx-player-sending-area",
        playerFull: ".bpx-player-ctrl-full",
        playerWeb: ".bpx-player-ctrl-web",
        playerWide: ".bpx-player-ctrl-wide",
        dmInput: "input.bpx-player-dm-input",
        dmInputFocus: "input.bpx-player-dm-input:focus",
        playerCurrentTime: ".bpx-player-ctrl-time-current",
        mirror: ".bpx-player-ctrl-setting-mirror input",
        lightOff: ".bpx-player-ctrl-setting-lightoff input",
        jumpContent: ".bpx-player-electric-jump",
        dmSwitch: ".bpx-player-dm-switch input",
        dmTypeScroll: ".bpx-player-block-typeScroll",
        dmTypeTop: ".bpx-player-block-typeTop",
        dmTypeBottom: ".bpx-player-block-typeBottom",
        dmTypeColor: ".bpx-player-block-typeColor",
        dmTypeSpecial: ".bpx-player-block-typeSpecial",
        videoQuality: ".bpx-player-ctrl-quality-menu-item",
        vipVideoQuality: ".bpx-player-ctrl-quality-badge-bigvip",
        moreDescribe: "#v_desc .toggle-btn",
        playerVideoArea: ".bpx-player-video-area",
        playerCtrlPrev: ".bpx-player-ctrl-prev",
        playerCtrlNext: ".bpx-player-ctrl-next",
    };
    const [ON, OFF] = [1, 0];
    const [FULLSCREEN, WEBFULLSCREEN, WIDESCREEN, DEFAULT, MINI] = ["full", "web", "wide", "normal", "mini"];
    const KEY_BOARD = {
        keyCode: {
            'enter': 13,
            'esc': 27,
            '=': 187,
            '-': 189,
            '0': 48,
            '1': 49,
            '2': 50,
            '3': 51,
            '4': 52,
            '5': 53,
            '6': 54,
            '7': 55,
            '8': 56,
            '9': 57,
            'a': 65,
            'b': 66,
            'c': 67,
            'd': 68,
            'e': 69,
            'f': 70,
            'g': 71,
            'h': 72,
            'i': 73,
            'j': 74,
            'k': 75,
            'l': 76,
            'm': 77,
            'n': 78,
            'o': 79,
            'p': 80,
            'q': 81,
            'r': 82,
            's': 83,
            't': 84,
            'u': 85,
            'v': 86,
            'w': 87,
            'x': 88,
            'y': 89,
            'z': 90,
            'left': 37,
            'up': 38,
            'right': 39,
            'down': 40,
            'space': 32,
            '[': 219,
            ']': 221,
            '\\': 220,
            ';': 186,
            "'": 222,
            ',': 188,
            '.': 190,
            '/': 191,
            '`': 192,
        },
        defaultShortCut: {
            f: { text: 'f键', status: ON, bindKey: 'f' },
            leftSquareBracket: { text: '[键', status: ON, bindKey: '[' },
            rightSquareBracket: { text: ']键', status: ON, bindKey: ']' },
            enter: { text: '回车键', status: OFF, bindKey: 'enter' },
            up: { text: '↑键', status: OFF, bindKey: 'up' },
            down: { text: '↓键', status: OFF, bindKey: 'down' },
            right: { text: '←键', status: OFF, bindKey: 'left' },
            left: { text: '→键', status: OFF, bindKey: 'right' },
            space: { text: '空格键播放/暂停', status: OFF, bindKey: 'space' },
            q: { text: 'q键-点赞', status: ON, bindKey: 'q' },
            w: { text: 'w键-投币', status: ON, bindKey: 'w' },
            e: { text: 'e键-收藏', status: ON, bindKey: 'e' },
            r: { text: 'r键-长按三连', status: ON, bindKey: 'r' },
            d: { text: 'd键-关闭弹幕', status: ON, bindKey: 'd' },
            m: { text: 'm键-静音', status: ON, bindKey: 'm' },
        },
        getKeyCode(key) {
            return this.keyCode[key];
        },
        isGlobalHotKey(keyCode) {
            return ["left", "up", "right", "down", "space"].find(key => this.getKeyCode(key) == keyCode);
        },
        isNumberKeyCode(keyCode) {
            return keyCode >= this.getKeyCode('0') && keyCode <= this.getKeyCode('9');
        },
        getDefaultShortCutStatus(key) {
            return STORAGE.getDefaultShortCutStatus(key, this.defaultShortCut[key].status);
        },
        checkDefaultShortCut(keyCode) {
            return Object.entries(this.defaultShortCut)
                .some(([key, { text, status, bindKey }]) => this.getKeyCode(bindKey) == keyCode && this.getDefaultShortCutStatus(key)== ON);
        },
    };
    const H5_PLAYER = {
        variable: {
            speed: { text: '播放速度调整倍数', value: 0.25 },
            minSpeed: { text: '最小播放速度倍数', value: 0.25 },
            maxSpeed: { text: '最大播放速度倍数', value: 4 },
            volume: { text: '音量调整百分比', value: 1 },
            videoProgress: { text: '快进/快退调整秒数', value: 1 },
        },
        getVarSetting(key) {
            return this.variable[key].value;
        },
        init() {
            this.h5Player = q(SELECTOR.h5Player);
            this.control = q(SELECTOR.playerControl);
            this.senderBar = q(SELECTOR.senderBarArea);
            this.played = false;
            console.log('H5_PLAYER done');
        },
        addEventListener(event, func) {
            this.h5Player.on(event, func);
        },
        addPlayingEvent(func) {
            this.addEventListener('playing', func);
        },
        addPauseEvent(func) {
            this.addEventListener('pause', func);
        },
        addEndedEvent(func) {
            this.addEventListener('ended', func);
        },
        getDuration() {
            return this.h5Player[0].duration;
        },
        getCurrentTime() {
            return this.h5Player[0].currentTime;
        },
        setVideoCurrentTime(time) {
            if (time > -1 && time <= this.h5Player[0].duration) {
                this.h5Player[0].currentTime = time;
            }
        },
        play() {
            this.h5Player[0].play();
        },
        pause() {
            this.h5Player[0].pause();
        },
        isPaused(){
            return this.h5Player[0].paused;
        },
        playAndPause() {
            this.isPaused() ? this.play() : this.pause();
        },
        subSpeed() {
            this.h5Player[0].playbackRate = Math.max(this.h5Player[0].playbackRate - this.getVarSetting('speed'), this.getVarSetting('minSpeed'));
        },
        addSpeed() {
            this.h5Player[0].playbackRate = Math.min(this.h5Player[0].playbackRate + this.getVarSetting('speed'), this.getVarSetting('maxSpeed'));
        },
        resetSpeed() {
            this.h5Player[0].playbackRate = 1;
        },
        getPlaybackRate() {
            return this.h5Player[0].playbackRate;
        },
        getVolume() {
            return this.h5Player[0].volume;
        },
        setVolume(volume) {
            this.h5Player[0].volume = volume;
        },
        mute() {
            this.h5Player[0].muted = !this.h5Player[0].muted;
        },
        subVolume() {
            this.setVolume(Math.max(this.getVolume() - (this.getVarSetting('volume') / 100), 0));
        },
        addVolume() {
            this.setVolume(Math.min(this.getVolume() + (this.getVarSetting('volume') / 100), 1));
        },
        subProgress() {
            this.h5Player[0].currentTime -= this.getVarSetting('videoProgress');
        },
        addProgress() {
            this.h5Player[0].currentTime += this.getVarSetting('videoProgress');
        },
        offsetTop() {
            return this.h5Player.offset().top;
        }
    };
    const UI = {
        addStyle(css, id) {
            id = id ? `id=${id}` : '';
            q('head').append(`<style ${id} type="text/css">${css}</style>`);
        },
        removeStyle(styleId) {
            const styleNode = q(styleId)[0];
            styleNode && styleNode.parentNode.removeChild(styleNode);
        },
        showHint(info, hideVolumeIcon=true) {
            clearTimeout(this.hintTimer);
            q('div.bpx-player-volume-hint').length || this.initShowHint();
            q('div.bpx-player-volume-hint').css('opacity', 1).css('display', '');

            q('span.bpx-player-volume-hint-icon').css('display', hideVolumeIcon ? 'none' : '');
            q('span.bpx-player-volume-hint-text')[0].innerHTML = info;
            this.hintTimer = setTimeout(() => {
                q('div.bpx-player-volume-hint').css('opacity', 0).css('display', 'none');
                q('span.bpx-player-volume-hint-icon').css('display', '');
            }, 1E3);
        },
        initShowHint() {
            const html = `
            <div class="bpx-player-volume-hint" style="opacity: 0; display: none;">
                <span class="bpx-player-volume-hint-icon"><span class="bpx-common-svg-icon">
                    <svg viewBox="0 0 22 22">
                        <use xlink:href="#bpx-svg-sprite-volume"></use>
                    </svg>
                </span>
            <span class="bpx-common-svg-icon" style="display: none;">
                <svg viewBox="0 0 22 22">
                    <use xlink:href="#bpx-svg-sprite-volume-off"></use>
                </svg>
            </span>
            </span>
                <span class="bpx-player-volume-hint-text">70%</span>
            </div>
            `;
            q(SELECTOR.playerVideoArea).append(html);
        },
        hideSenderBar() {
            this.hideSenderBarCss();
        },
        hideSenderBarCss() {
            const css = `${SELECTOR.senderBarArea}{opacity: 0!important;display: none!important}`;
            this.addStyle(css, 'qd-hideSenderBar');
        },
        showSenderBar() {
            H5_PLAYER.senderBar.css('opacity', 1).css('display', '');
            this.removeStyle('#qd-hideSenderBar');
        },
        h5PlayerRotate(flag, rotationDeg=90) {
            const h5Player = H5_PLAYER.h5Player[0];
            const deg = this.getRotationDeg(H5_PLAYER.h5Player) + rotationDeg * flag;
            let transform = `rotate(${deg}deg)`;
            if (deg == 0 || deg == 180 * flag) {
                transform += ` scale(1)`;
            } else {
                transform += ` scale(${h5Player.videoHeight / h5Player.videoWidth})`;
            }
            this.setH5PlayerRransform(transform);
        },
        setH5PlayerRransform(transform) {
            H5_PLAYER.h5Player.css('-webkit-transform', transform)
                .css('-moz-transform', transform)
                .css('-ms-transform', transform)
                .css('-o-transform', transform)
                .css('transform', transform);
        },
        getTransformCss(e) {
            return e.getCss('-webkit-transform') || e.getCss('-moz-transform') || e.getCss('-ms-transform') || e.getCss('-o-transform') || 'none';
        },
        getRotationDeg(e) {
            const transformCss = this.getTransformCss(e);
            let matrix = transformCss.match('matrix\\((.*)\\)');
            if (matrix) {
                matrix = matrix[1].split(',');
                if (matrix) {
                    const rad = Math.atan2(matrix[1], matrix[0]);
                    return (rad * 180 / Math.PI) | 0;
                }
            }
            return 0;
        },
        isWide() {
            return q(SELECTOR.playerContainer).attr('data-screen') == WIDESCREEN || q(SELECTOR.playerWide).hasClass('bpx-state-entered');
        },
        ultraWidescreenCss() {
            this.removeStyle('#qd-ultraWidescreen');
            const clientWidth = document.body.clientWidth;
            const marginLeft = q('#bilibili-player ').offset().left;
            const css = `
            .bpx-player-container[data-screen=wide] {
                width:${clientWidth}px!important;margin-left:-${marginLeft}px!important;z-index: 1000!important;
            }
            `;
            this.addStyle(css, 'qd-ultraWidescreen');
        },
        rConCss() {
            this.removeStyle('#qd-rCon');
            if (!this.isBottomTitle || !this.isWide()) {
                return;
            }
            const top = H5_PLAYER.h5Player.parseFloat('height');
            const css = `
            .r-con{margin-top:${top}px!important}
            .right-container{margin-top:${top}px!important}
            `;
            this.addStyle(css, 'qd-rCon');
        },
        bottomTitle() {
            q('#viewbox_report').after(q('#playerWrap')[0]);
            if (!this.isBottomTitle) {
                const css = `#viewbox_report {height:auto!important;}`;
                this.addStyle(css, 'qd-bottomTitle');
                this.isBottomTitle = true;
            }
        },
        removeFixedHeader() {
            q('.bili-header').removeClass('fixed-header');
        },
    };
    const REPEAT_CONTROLLER = {
        repeatStart: undefined,
        repeatEnd: undefined,
        setRepeatStart() {
            this.repeatStart = H5_PLAYER.getCurrentTime();
            UI.showHint(`起点 ${q(SELECTOR.playerCurrentTime).text()}`);
        },
        setRepeatEnd() {
            this.repeatEnd = H5_PLAYER.getCurrentTime();
            UI.showHint(`终点 ${q(SELECTOR.playerCurrentTime).text()}`);
        },
        resetRepeat() {
            this.repeatEnd = this.repeatStart = undefined;
            UI.showHint(`清除循环点`)
        },
        check() {
            return this.repeatEnd && this.repeatStart && this.repeatEnd <= H5_PLAYER.getCurrentTime();
        },
        start() {
            H5_PLAYER.setVideoCurrentTime(this.repeatStart);
        }
    };
    const CONTROLLER = {
        keydownFn: undefined,
        hintTimer: undefined,
        config: {
            globalHotKey: { text: '快捷键设置全局', status: OFF, tips: '上下左右空格不会滚动页面' },
        },
        quickDo: {
            settingPanel: { value: '`', text: '设置面板', },
            fullscreen: { value: 'f', text: '全屏', },
            webFullscreen: { value: 'w', text: '网页全屏', },
            widescreen: { value: 'q', text: '宽屏', },
            subSpeed: { value: '[', text: '减少速度', },
            addSpeed: { value: ']', text: '增加速度', },
            resetSpeed:  { value: '\\', text: '重置速度', },
            danmu: { value: 'd', text: '弹幕', },
            playAndPause: { value: 'p', text: '暂停播放', },
            prevPart: { value: 'k', text: '上一P', },
            nextPart: { value: 'l', text: '下一P', },
            showDanmuInput: { value: 'enter', text: '发弹幕', },
            mirror: { value: 'j', text: '镜像', },
            danmuTop: { value: 't', text: '顶部弹幕', },
            danmuBottom: { value: 'b', text: '底部弹幕', },
            danmuScroll: { value: 's', text: '滚动弹幕', },
            danmuSpecial: { value: '', text: '高级弹幕', },
            danmuColor: { value: 'c', text: '彩色弹幕', },
            rotateRight: { value: 'o', text: '向右旋转', },
            rotateLeft: { value: 'i', text: '向左旋转', },
            lightOff: { value: 'y', text: '灯', },
            mute: { value: 'm', text: '静音', },
            scroll2Top: { value: ';', text: '回到顶部', },
            jumpContent: { value: 'g', text: '跳过鸣谢', },
            playerSetOnTop: { value: "'", text: '播放器置顶', },
            setRepeatStart: { value: ',', text: '循环起点', },
            setRepeatEnd: { value: '.', text: '循环终点', },
            resetRepeat: { value: '/', text: '清除循环点', },
            subVolume: { value: '', text: '减少音量', },
            addVolume: { value: '', text: '增加音量', },
            subProgress: { value: '', text: '快退', },
            addProgress: { value: '', text: '快进', },
        },
        initKeyDown() {
            this.keydownFn = this.keydownFn || (e=> !q('input:focus, textarea:focus').length && this.keyHandler(e));
            q(document).on('keydown', this.keydownFn, true);
            console.log('initKeyDown done');
        },
        keyHandler(e) {
            const {keyCode, ctrlKey, shiftKey, altKey} = e;
            if (ctrlKey || shiftKey || altKey) {
                return;
            }
            if (KEY_BOARD.checkDefaultShortCut(keyCode)) {
                e.stopPropagation();
            }
            if (this.getControllerConfigStatus('globalHotKey') === ON) {
                if (KEY_BOARD.isGlobalHotKey(keyCode)) {
                    this.focusPlayer();
                    e.preventDefault();
                }
            }

            Object.keys(this.quickDo)
                .some(quickDoKey => keyCode === this.getQuickDoKeyCode(quickDoKey) && (!this[quickDoKey]() || !e.preventDefault())) ||
                this.numberKeySkip(keyCode);
            e.defaultPrevented;
        },
        bindDanmuInputKeydown() {
            q(SELECTOR.dmInput).on('keydown', e => {
                e.keyCode === KEY_BOARD.keyCode.enter && this.hideDanmuInput();
            });
        },
        getControllerConfigStatus(key) {
            return STORAGE.getControllerConfigStatus(key, this.config[key].status);
        },
        getQuickDoKeyCode(quickDoKey) {
            return KEY_BOARD.getKeyCode(STORAGE.getQuickDoKey(quickDoKey, this.quickDo[quickDoKey].value));
        },
        focusPlayer() {
            H5_PLAYER.control.click();
        },
        numberKeySkip(keyCode) {
            if (KEY_BOARD.isNumberKeyCode(keyCode)) {
                const multiple = keyCode - KEY_BOARD.getKeyCode('0');
                H5_PLAYER.setVideoCurrentTime(H5_PLAYER.getDuration()/ 10 * multiple);
            }
        },
        triggerSleep(el, event='click', ms=100) {
            return new Promise((resolve, reject) => {
                if (el && el[0]) {
                    el.trigger(event);
                    setTimeout(resolve, ms);
                } else {
                    reject();
                }
            });
        },
        mode(mode, check=true) {
            const curMode = q(SELECTOR.playerContainer).attr('data-screen');
            if (check && mode == curMode) {
                return;
            }
            switch (mode) {
                case FULLSCREEN: return this.fullscreen();
                case WEBFULLSCREEN: return this.webFullscreen();
                case WIDESCREEN: return this.widescreen();
                case MINI: return q(SELECTOR.playerContainer)[0].setAttribute('data-screen', 'mini');
                case DEFAULT: return curMode == MINI ? q(SELECTOR.playerContainer)[0].setAttribute('data-screen', DEFAULT) : this.mode(curMode, false);
                default: return;
            }
        },
        ultraWidescreen() {
            this.mode(WIDESCREEN);
            UI.ultraWidescreenCss();
        },
        // ---------------
        settingPanel() {
            SETTING_PANEL.switch();
        },
        fullscreen() {
            q(SELECTOR.playerFull).click();
        },
        webFullscreen() {
            q(SELECTOR.playerWeb).click();
        },
        widescreen() {
            q(SELECTOR.playerWide).click();
        },
        subSpeed() {
            H5_PLAYER.subSpeed();
            UI.showHint("速度: " + H5_PLAYER.getPlaybackRate() + "x");
        },
        addSpeed() {
            H5_PLAYER.addSpeed();
            UI.showHint("速度: " + H5_PLAYER.getPlaybackRate() + "x");
        },
        resetSpeed() {
            H5_PLAYER.resetSpeed();
            UI.showHint("速度: " + H5_PLAYER.getPlaybackRate() + "x");
        },
        danmu() {
            q(SELECTOR.dmSwitch).click();
        },
        playAndPause() {
            H5_PLAYER.playAndPause();
        },
        prevPart() {
            q(SELECTOR.playerCtrlPrev).click()
        },
        nextPart() {
            q(SELECTOR.playerCtrlNext).click();
        },
        showDanmuInput() {
            UI.showSenderBar();
            const danmuInput = q(SELECTOR.dmInput);
            if (!q(SELECTOR.dmInputFocus).length) {
                this.triggerSleep(danmuInput, 'mouseover').then(() => {
                    danmuInput.select().click();
                }).catch(() => {});
            }
        },
        hideDanmuInput() {
            UI.hideSenderBar();
            const danmuInput = q(SELECTOR.dmInput);
            this.triggerSleep(danmuInput, 'mouseout').then(() => {
                danmuInput.blur();
                this.focusPlayer();
            }).catch(() => {});
        },
        mirror() {
            UI.setH5PlayerRransform('');
            q(SELECTOR.mirror).click();
        },
        danmuType(selector) {
            q(selector).click();
            const text = q(`${selector} .bpx-player-block-filter-label`).text();
            if (q(`${selector}.bpx-player-active`).length) {
                UI.showHint(`开启${text}`);
            } else {
                UI.showHint(`关闭${text}`);
            }
        },
        danmuTop() {
            this.danmuType(SELECTOR.dmTypeTop);
        },
        danmuBottom() {
            this.danmuType(SELECTOR.dmTypeBottom);
        },
        danmuScroll() {
            this.danmuType(SELECTOR.dmTypeScroll);
        },
        danmuColor() {
            this.danmuType(SELECTOR.dmTypeColor);
        },
        danmuSpecial() {
            this.danmuType(SELECTOR.dmTypeSpecial);
        },
        rotateRight() {
            UI.h5PlayerRotate(1);
        },
        rotateLeft() {
            UI.h5PlayerRotate(-1);
        },
        isLightOff() {
            return q(SELECTOR.lightOff)[0].checked;
        },
        lightOff() {
            q(SELECTOR.lightOff).click();
        },
        light(status) {
            if (status == ON && this.isLightOff()) {
                q(SELECTOR.lightOff).click();
            } else if (status == OFF && !this.isLightOff()) {
                q(SELECTOR.lightOff).click();
            }
        },
        mute() {
            H5_PLAYER.mute();
        },
        scroll2Top() {
            window.scrollTo(0, 0);
        },
        jumpContent() {
            q(SELECTOR.jumpContent).click();
        },
        playerSetOnTop() {
            this.scroll2Top();
            window.scrollTo(0, H5_PLAYER.offsetTop());
        },
        setRepeatStart() {
            REPEAT_CONTROLLER.setRepeatStart();
        },
        setRepeatEnd() {
            REPEAT_CONTROLLER.setRepeatEnd();
        },
        resetRepeat() {
            REPEAT_CONTROLLER.resetRepeat();
        },
        subVolume() {
            H5_PLAYER.subVolume();
            UI.showHint(`${Math.ceil(H5_PLAYER.getVolume() * 100)}%`, false);
        },
        addVolume() {
            H5_PLAYER.addVolume();
            UI.showHint(`${Math.ceil(H5_PLAYER.getVolume() * 100)}%`, false);
        },
        subProgress() {
            H5_PLAYER.subProgress();
        },
        addProgress() {
            H5_PLAYER.addProgress();
        },
        // ---------------
    };
    const AUTOMATON = {
        playerCheckbox: {
            options: {
                hideSenderBar: { text: '隐藏弹幕栏', status: ON, fn: 'hideOrShowSenderBar', tips: '发弹幕快捷键可显示' },
                widescreenScroll2Top: { text: '宽屏时回到顶部', status: OFF, ban:['widescreenPlayerSetOnTop'], fn: 'setWidescreenPos' },
                widescreenPlayerSetOnTop: { text: '宽屏时播放器置顶部', status: ON, ban:['widescreenScroll2Top'], fn: 'setWidescreenPos' },
                lightOffWhenPlaying: { text: '播放时自动关灯', status: OFF, },
                lightOnWhenPause: { text: '暂停时自动开灯', status: OFF, },
                screenWhenPause: { text: '暂停还原屏幕', status: OFF, },
                ultraWidescreen: { text: '超宽屏', status: ON, fn: 'ultraWidescreen', tips: '宽屏模式宽度和窗口一样'},
                bottomTitle: { text: '标题位于播放器下方', status: ON, tips: '刷新生效' },
            },
            btn: '播放器设置',
        },
        startCheckbox: {
            options: {
                lightOff: { text: '自动关灯', status: OFF },
                webFullscreen: { text: '自动网页全屏', status: OFF, ban:['widescreen'] },
                widescreen: { text: '自动宽屏', status: ON, ban:['webFullscreen'] },
                highQuality: { text: '自动最高画质', status: ON, ban:['vipHighQuality'] },
                vipHighQuality: { text: '自动最高画质(大会员使用)', status: OFF, ban:['highQuality'] },
                vipHighQualityNot4K: { text: '自动最高画质不选择4K', status: OFF },
                moreDescribe: { text: '自动展开视频简介', status: ON },
            },
            btn: '播放前自动设置',
        },
        endCheckbox: {
            options: {
                lightOn: { text: '播放结束自动开灯', status: ON, tips: '还有下一P不触发' },
                exitScreen: { text: '播放结束还原屏幕', status: ON, ban:['exit2WideScreen'], tips: '还有下一P不触发' },
                exit2WideScreen: { text: '播放结束还原宽屏', status: OFF, ban:['exitScreen'], tips: '还有下一P不触发' },
                autoJumpContent: { text: '跳过充电鸣谢', status: ON },
            },
            btn: '播放结束自动设置',
        },
        checkPlayingSetting(key) {
            return STORAGE.checkPlayingSetting(key, this.startCheckbox.options[key].status);
        },
        checkPlayerSetting(key) {
            return STORAGE.checkPlayerSetting(key, this.playerCheckbox.options[key].status);
        },
        checkEndedSetting(key) {
            return STORAGE.checkEndedSetting(key, this.endCheckbox.options[key].status);
        },
        trigger(mutation, target) {
            if (target.hasClass('bpx-player-control-bottom-right')) {
                if (mutation.addedNodes[0].className == 'bpx-player-ctrl-btn bpx-player-ctrl-quality') {
                    this.videoQuality();
                } else if (mutation.addedNodes.length == 1 && mutation.addedNodes[0].className.indexOf('bpx-player-ctrl-full') > 0) {
                    this.playStartMode();
                }
            } else if (target.hasClass('bpx-player-state-buff-icon')) {
                UI.rConCss();
            }
        },
        attributesTrigger() {
            this.adjustUI();
        },
        adjustUI() {
            this.checkPlayerSetting('ultraWidescreen') && UI.ultraWidescreenCss();
            if (this.checkPlayerSetting('widescreenScroll2Top') && UI.isWide()) {
                CONTROLLER.scroll2Top();
            } else if (this.checkPlayerSetting('widescreenPlayerSetOnTop') && UI.isWide()) {
                CONTROLLER.playerSetOnTop();
            }
            UI.rConCss();
        },
        init() {
            window.addEventListener('resize', () => {
                this.adjustUI();
            });

            H5_PLAYER.addEventListener('loadeddata', () => {
                this.checkPlayerSetting('hideSenderBar') && UI.hideSenderBar();
                this.checkPlayerSetting('bottomTitle') && UI.bottomTitle();
                this.checkPlayingSetting('moreDescribe') && this.moreDescribe();
                this.playStartMode();
            });
            H5_PLAYER.addEventListener('timeupdate', () => {
                REPEAT_CONTROLLER.check() && REPEAT_CONTROLLER.start();
            });
            H5_PLAYER.addPlayingEvent(() => {
                if (!H5_PLAYER.played) {
                    this.checkPlayingSetting('lightOff') && CONTROLLER.light(OFF);
                }
                this.checkPlayerSetting('lightOffWhenPlaying') && CONTROLLER.light(OFF);
                H5_PLAYER.played = true;
            });

            H5_PLAYER.addPauseEvent(() => {
                this.checkPlayerSetting('lightOnWhenPause') && CONTROLLER.light(ON);
                this.checkPlayerSetting('screenWhenPause') && CONTROLLER.mode(DEFAULT);
            });

            H5_PLAYER.addEndedEvent(() => {
                this.checkEndedSetting('lightOn') && CONTROLLER.light(ON);
                this.checkEndedSetting('autoJumpContent') && CONTROLLER.jumpContent();

                if (this.checkEndedSetting('exitScreen')) {
                    CONTROLLER.mode(DEFAULT);
                } else if (this.checkEndedSetting('exit2WideScreen')) {
                    CONTROLLER.mode(WIDESCREEN);
                }
            });

        },
        playStartMode() {
            if (this.checkPlayingSetting('webFullscreen')) {
                CONTROLLER.mode(WEBFULLSCREEN);
            } else if (this.checkPlayingSetting('widescreen')) {
                CONTROLLER.mode(WIDESCREEN);
            }
        },
        videoQuality() {
            if (!this.checkPlayingSetting('highQuality') && !this.checkPlayingSetting('vipHighQuality')) {
                return;
            }
            const btn = q(SELECTOR.videoQuality);
            let index = -1;
            if (this.checkPlayingSetting('highQuality')) {
                index = btn.findIndex(e => !q(e).find(SELECTOR.vipVideoQuality)[0]);
            } else if (this.checkPlayingSetting('vipHighQualityNot4K')) {
                index = btn.findIndex(e => !e.textContent.includes('4K'))
            }
            index > -1 && btn[index].click();
        },
        moreDescribe() {
            q(SELECTOR.moreDescribe).click();
        }
    };
    const STORAGE = {
        version: 'v1',
        getDefaultShortCutStatus(key, defaultValue) {
            return this.get('defaultShortCut', key, defaultValue);
        },
        getQuickDoKey(quickDoKey, defaultValue) {
            return this.get('quickDo', quickDoKey, defaultValue);
        },
        getControllerConfigStatus(key, defaultValue) {
            return this.get('controllerConfig', key, defaultValue);
        },
        checkPlayingSetting(key, defaultValue) {
            return this.get('startCheckbox', key, defaultValue) === ON;
        },
        checkPlayerSetting(key, defaultValue) {
            return this.get('playerCheckbox', key, defaultValue) === ON;
        },
        checkEndedSetting(key, defaultValue) {
            return this.get('endCheckbox', key, defaultValue) === ON;
        },
        gmKey(configName, key) {
            return `${this.version}:${configName}:${key}`;
        },
        get(configName, key, defaultValue) {
            if (GM_getValue(this.gmKey(configName, key)) == undefined) {
                return defaultValue;
            }
            return GM_getValue(this.gmKey(configName, key));
        },
        save(configName, key, value) {
            GM_setValue(this.gmKey(configName, key), value);
        },
    };
    const SETTING_PANEL = {
        init() {
            this.newSettingPanel();
            ['playerCheckbox', 'startCheckbox', 'endCheckbox'].forEach(configName => {
                for (let [key, { text, status, ban, fn, tips }] of Object.entries(AUTOMATON[configName].options)) {
                    this.addCheckboxSettingItem(configName, key, text, status, ban, fn, tips);
                }
            });
            for (let [key, { value, text }] of Object.entries(CONTROLLER.quickDo)) {
                this.addInputSettingItem('quickDo', key, value, text);
            }
            for (let [key, { text, status, tips }] of Object.entries(CONTROLLER.config)) {
                this.addCheckboxSettingItem('controllerConfig', key, text, status, null, null, null);
            }
            for (let [key, { text, status, bindKey }] of Object.entries(KEY_BOARD.defaultShortCut)) {
                this.addCheckboxSettingItem("defaultShortCut", key, `屏蔽${text}`, status, null, null, null);
            }

        },
        newSettingPanel() {
            const id = 'qd-setting-panel';
            const araeId = id + '-area'
            const colseId = id + '-close'
            const html = `
            <div id='${id}' style="height: 500px;width: 800px;color: #fff;border-radius: 4px;position: absolute;text-align: center;z-index: 80;-webkit-font-smoothing: antialiased;background-color: rgba(33,33,33,.9);left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);">
                <div style="font-size: 16px;text-align: center;line-height: 40px;border-bottom: 1px solid hsla(0,0%,100%,.1);">
                    bilibili H5播放器快捷操作设置 <span id='${colseId}' style="float: right;margin-right: 10px;"> X </span>
                </div>
                <div id='${araeId}' class="bpx-player-hotkey-panel-area" style="touch-action: pan-x; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);min-height: 430px;padding-left: 35px;">
                    <div class="bpx-player-hotkey-panel-content" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px);">
                    </div>
                </div>
            </div>
            `;
            q(SELECTOR.playerVideoArea).append(html);
            this.settingPanel = q(`#${id}`);
            this.settingPanelArea = q(`#${araeId}`);
            q(`#${colseId}`).on('click', () => {
                this.close();
            })
            this.close();
        },
        addCheckboxSettingItem(configName, key, text, status, ban, fn, tips) {
            const checked = STORAGE.get(configName, key, status) == ON ? 'checked' : '';
            const checkboxId = `${configName}-${key}-box`;
            let item = `
            <div style="min-width: 185px;float: left;height: 24px;line-height: 24px;text-align: left;">
                <span>
                <input id="${checkboxId}" type="checkbox" ${checked}></input>
                </span>
                <span>${text}</span>
            </div>`
            this.settingPanelArea.append(item);
            q(`#${checkboxId}`).on('click', function(e) {
                STORAGE.save(configName, key, this.checked ? ON : OFF);
            });
        },
        addInputSettingItem(configName, key, value, text) {
            const inputId = `${configName}-${key}-input`;
            const val = STORAGE.get(configName, key, value);
            let item = `
            <div style="min-width: 185px;float: left;height: 24px;line-height: 24px;text-align: left;">
                <span>
                <input id="${inputId}" type="input" value="${val}" style="width: 35px;height: 12px;color: black;text-align: center;"></input>
                </span>
                <span>${text}</span>
            </div>`
            this.settingPanelArea.append(item);
            const input = q(`#${inputId}`);
            input.on('keydown', e => {
                const isGlobalHotKey = KEY_BOARD.isGlobalHotKey(e.keyCode);
                const key = isGlobalHotKey || e.key.toLowerCase();
                const isA2Z = e.keyCode >= 65 && e.keyCode <= 90;
                const isSymbol = "[]\\;',./-=".indexOf(key) > -1;
                if ((isGlobalHotKey || isA2Z || isSymbol || e.keyCode === KEY_BOARD.keyCode.enter) && KEY_BOARD.getKeyCode(key)) {
                    input.val(key);
                }
                const isDelete = e.keyCode == 8 || e.keyCode == 46;
                (!isDelete || isGlobalHotKey) && e.preventDefault();
            }).on('keyup', e => {
                STORAGE.save(configName, key, input.val());
            }).on('click', e => {
                input.select();
                e.preventDefault();
            });
        },
        show() {
            this.settingPanel.css('display', '');
        },
        close() {
            this.settingPanel.css('display', 'none');
        },
        switch() {
            this.settingPanel.getCss('display') == 'none' ? this.show() : this.close();
        }
    };
    new MutationObserver((mutations, observer) => {
        mutations.forEach(mutation => {
            const target = q(mutation.target);
            if (target.hasClass('fixed-header')) {
                UI.removeFixedHeader();
            }
            if (target.hasClass('header-v2')) {
                if (H5_PLAYER.h5Player) {
                    H5_PLAYER.played = false;
                    return;
                }
                try {
                    H5_PLAYER.init();
                    CONTROLLER.initKeyDown();
                    AUTOMATON.init();
                    SETTING_PANEL.init();
                    console.log('bilibili-quickdo done');
                } catch (e) {
                    console.error('bilibili-quickdo init error:', e);
                }
            } else if (target.hasClass('bpx-player-sending-bar') && mutation.addedNodes.length) {
                CONTROLLER.bindDanmuInputKeydown();
            } else {
                AUTOMATON.trigger(mutation, target);
            }
        });
    }).observe(document.body, {
        childList: true,
        subtree: true,
    });
    new MutationObserver((mutations, observer) => {
        AUTOMATON.attributesTrigger();
    }).observe(document.body, {
        attributes: true,
    });
})();