阿里网盘播放器防挡字幕

阿里网盘网页播放器老是挡住我的字幕,该脚本用于防止视频控制器挡住字幕,实现方式为简单地将控制器上移

// ==UserScript==
// @name         阿里网盘播放器防挡字幕
// @namespace    http://tampermonkey.net/
// @version      0.4.4
// @description  阿里网盘网页播放器老是挡住我的字幕,该脚本用于防止视频控制器挡住字幕,实现方式为简单地将控制器上移
// @author       voeoc
// @match        https://www.aliyundrive.com/*
// @icon         https://www.google.com/s2/favicons?domain=aliyundrive.com
// @require      https://cdn.staticfile.org/sweetalert2/11.7.11/sweetalert2.all.min.js
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        unsafeWindow
// @run-at       document-end
// @license MIT
// ==/UserScript==

(function () {
    'use strict';

    const GMKEY_CONTROL_PANEL_BOTTOM_VALUE = "VOEOC_GMKEY_CONTROL_PANEL_BOTTOM_VALUE";
    const GMKEY_IF_CONTROL_PANEL_ORIGIN_WIDTH_VALUE = "VOEOC_GMKEY_IF_CONTROL_PANEL_ORIGIN_WIDTH_VALUE";
    const GMKEY_CONTROL_PANEL_WIDTH_VALUE = "VOEOC_GMKEY_CONTROL_PANEL_WIDTH_VALUE";
    const GMKEY_CONTROL_PANEL_OPACITY_VALUE = "VOEOC_GMKEY_CONTROL_PANEL_OPACITY_VALUE";
    const GMKEY_CONTROL_PANEL_MAIN_OPACITY_VALUE = "VOEOC_GMKEY_CONTROL_PANEL_MAIN_OPACITY_VALUE";
    const GMKEY_POPUP_PANEL_OPACITY_VALUE = "VOEOC_GMKEY_POPUP_PANEL_OPACITY_VALUE";

    const GMKEY_LIST = [
        GMKEY_CONTROL_PANEL_BOTTOM_VALUE,
        GMKEY_IF_CONTROL_PANEL_ORIGIN_WIDTH_VALUE,
        GMKEY_CONTROL_PANEL_WIDTH_VALUE,
        GMKEY_CONTROL_PANEL_OPACITY_VALUE,
        GMKEY_CONTROL_PANEL_MAIN_OPACITY_VALUE,
        GMKEY_POPUP_PANEL_OPACITY_VALUE,
    ]

    const MENU_ACCESS_KEY_SETTINGS = "VOEOC_MENU_ACCESS_KEY_SETTINGS";
    const MENU_ACCESS_KEY_CONTROL_PANEL_BOTTOM = "VOEOC_MENU_ACCESS_KEY_CONTROL_PANEL_BOTTOM";

    const PREFIX_ID = "voeoc-swal-input-"

    function getNewSettings() {
        var tmpIndex = 0;
        return [
            parseInt(document.getElementById(`${PREFIX_ID}${tmpIndex++}`).value),
            Boolean(document.getElementById(`${PREFIX_ID}${tmpIndex++}`).checked),
            parseInt(document.getElementById(`${PREFIX_ID}${tmpIndex++}`).value),
            parseFloat(document.getElementById(`${PREFIX_ID}${tmpIndex++}`).value),
            parseFloat(document.getElementById(`${PREFIX_ID}${tmpIndex++}`).value),
            parseFloat(document.getElementById(`${PREFIX_ID}${tmpIndex++}`).value)
        ]
    }

    function loadSettings() {
        return [
            GM_getValue(GMKEY_CONTROL_PANEL_BOTTOM_VALUE, 140),
            GM_getValue(GMKEY_IF_CONTROL_PANEL_ORIGIN_WIDTH_VALUE, true),
            GM_getValue(GMKEY_CONTROL_PANEL_WIDTH_VALUE, 85),
            GM_getValue(GMKEY_CONTROL_PANEL_OPACITY_VALUE, 0.35),
            GM_getValue(GMKEY_CONTROL_PANEL_MAIN_OPACITY_VALUE, 0.85),
            GM_getValue(GMKEY_POPUP_PANEL_OPACITY_VALUE, 0.35),
        ]
    }

    function saveSettings(newSettingsData) {
        for (var i = 0; i < GMKEY_LIST.length; i++) {
            GM_setValue(GMKEY_LIST[i], newSettingsData[i])
        }
    }

    function applySettings(newSettings) {
        if (typeof newSettings === 'undefined') {
            newSettings = getNewSettings()
        }
        function getValue(key) {
            return newSettings[GMKEY_LIST.indexOf(key)]
        }

        // 应用css
        let head = document.getElementsByTagName('head')[0]

        var st = document.createElement('style');
        st.id = 'voeoc-style'
        try {
            head.removeChild(document.getElementById(st.id));
        } catch (e) {
        }

        const PLAYER_CSS_SELECTOR = "[class^=video-player--]";
        let css = `
            ${PLAYER_CSS_SELECTOR} {
                bottom:${getValue(GMKEY_CONTROL_PANEL_BOTTOM_VALUE)}px;
                ${getValue(GMKEY_IF_CONTROL_PANEL_ORIGIN_WIDTH_VALUE) ? 'width: ' + getValue(GMKEY_CONTROL_PANEL_WIDTH_VALUE) + '%;' : ''}
            }
            ${PLAYER_CSS_SELECTOR}:hover{
                opacity: ${getValue(GMKEY_CONTROL_PANEL_MAIN_OPACITY_VALUE)};
            }
            ${PLAYER_CSS_SELECTOR}[class*=show]:hover{
                opacity: ${getValue(GMKEY_CONTROL_PANEL_MAIN_OPACITY_VALUE)};
            }
            :fullscreen ${PLAYER_CSS_SELECTOR}{
                bottom:${getValue(GMKEY_CONTROL_PANEL_BOTTOM_VALUE)}px;
            }
            ${PLAYER_CSS_SELECTOR}[class*=show]{
                opacity: ${getValue(GMKEY_CONTROL_PANEL_OPACITY_VALUE)};
            }
            [class^=drawer-wrapper--], [class^=drawer-container--], [class^=drawers--] > div{
                background-color: #313136${parseInt(parseFloat(getValue(GMKEY_POPUP_PANEL_OPACITY_VALUE)) * 255).toString(16).padStart(2, '0')} !important;
            }
        `;

        if (st.styleSheet) {
            st.styleSheet.cssText = css;
        } else {
            st.appendChild(document.createTextNode(css));
        }

        head.appendChild(st);

        // 保存配置
        saveSettings(newSettings);
    }

    function registerMenuCommand() {
        // 全局化应用设置函数
        unsafeWindow.VOEOC_APPLY_SETTINGS = applySettings.bind(undefined, undefined);
        // 注册菜单项
        let menuId = GM_registerMenuCommand(`设置`,
            async function () {
                let settingsData = loadSettings()
                var tmpIndex = 0;
                await Swal.fire({
                    html:
                        `
                    <span>底部高度:<span id='${PREFIX_ID}${tmpIndex}-value'>${settingsData[tmpIndex]}</span>px</span><br /><input class="voeoc-swal-range" id="${PREFIX_ID}${tmpIndex}" type="range" min="0" max="800" step="1" value="${settingsData[tmpIndex]}" oninput="onchange()" onchange="document.getElementById(this.id+'-value').innerHTML=this.value;VOEOC_APPLY_SETTINGS();"><br />
                    <input id="${PREFIX_ID}${++tmpIndex}" type="checkbox" ${settingsData[tmpIndex] ? "checked" : ""} value="" onchange="let eInputWidth=document.getElementById('${PREFIX_ID}${tmpIndex + 1}');eInputWidth.disabled=!this.checked;VOEOC_APPLY_SETTINGS();if(!this.checked){document.getElementById('${PREFIX_ID}${tmpIndex + 1}-value').innerHTML='原生宽度';}else{eInputWidth.onchange()}">
                    <label for="${PREFIX_ID}${tmpIndex}">宽度(按比例):<span id='${PREFIX_ID}${++tmpIndex}-value'>${settingsData[tmpIndex - 1] ? settingsData[tmpIndex] + '%' : '原生宽度'}</span></label><br /><input class="voeoc-swal-range" id="${PREFIX_ID}${tmpIndex}" type="range" min="0" max="100" step="1" value="${settingsData[tmpIndex]}" oninput="onchange()" onchange="document.getElementById(this.id+'-value').innerHTML=this.value + '%';VOEOC_APPLY_SETTINGS();" ${settingsData[tmpIndex - 1] ? '' : 'disabled'}><br />
                    <span>鼠标移出时透明度:<span id='${PREFIX_ID}${++tmpIndex}-value'>${parseFloat(settingsData[tmpIndex]).toFixed(2)}</span></span><br /><input class="voeoc-swal-range" id="${PREFIX_ID}${tmpIndex}" type="range" min="0" max="1" step="0.01" value="${settingsData[tmpIndex]}" oninput="onchange()" onchange="document.getElementById(this.id+'-value').innerHTML=parseFloat(this.value).toFixed(2);VOEOC_APPLY_SETTINGS();"><br />
                    <span>鼠标悬停时透明度:<span id='${PREFIX_ID}${++tmpIndex}-value'>${parseFloat(settingsData[tmpIndex]).toFixed(2)}</span></span><br /><input class="voeoc-swal-range" id="${PREFIX_ID}${tmpIndex}" type="range" min="0" max="1" step="0.01" value="${settingsData[tmpIndex]}" oninput="onchange()" onchange="document.getElementById(this.id+'-value').innerHTML=parseFloat(this.value).toFixed(2);VOEOC_APPLY_SETTINGS();"><br />
                    <span>弹出框透明度:<span id='${PREFIX_ID}${++tmpIndex}-value'>${parseFloat(settingsData[tmpIndex]).toFixed(2)}</span></span><br /><input class="voeoc-swal-range" id="${PREFIX_ID}${tmpIndex}" type="range" min="0" max="1" step="0.01" value="${settingsData[tmpIndex]}" oninput="onchange()" onchange="document.getElementById(this.id+'-value').innerHTML=parseFloat(this.value).toFixed(2);VOEOC_APPLY_SETTINGS();"><br />
                    `,
                    showClass: {popup: ''},
                    position: 'top-end',
                    showConfirmButton: false,
                    showCancelButton: false,
                    focusConfirm: false,
                    width: 300,
                    padding: '0.3em',
                    background: "#19191acc",
                });
            }, MENU_ACCESS_KEY_SETTINGS);

    }

    (function() {
        GM_addStyle(`
            .voeoc-swal-range {
                width: 100%;
                outline: none;
            }
            #swal2-html-container {
                color: #d5d5d5;
            }
        `);

        // 载入默认配置
        applySettings(loadSettings())

        // 注册菜单项
        registerMenuCommand()

        // 注销旧版菜单项
        GM_unregisterMenuCommand(MENU_ACCESS_KEY_CONTROL_PANEL_BOTTOM)
    })()

})();