Greasy Fork

Greasy Fork is available in English.

哔哩哔哩标题及头像移至视频下方-优化BiliBili宽屏模式

【优化宽屏模式】此插件主要是为了兼容在宽屏模式下直接滚动至最上方会导致播放器不完整,所以把标题栏和头像移至视频下方

当前为 2022-05-20 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         哔哩哔哩标题及头像移至视频下方-优化BiliBili宽屏模式
// @namespace    https://github.com/iMortRex
// @version      0.0.2
// @description  【优化宽屏模式】此插件主要是为了兼容在宽屏模式下直接滚动至最上方会导致播放器不完整,所以把标题栏和头像移至视频下方
// @author       Mort Rex
// @run-at       document-end
// @match        *.bilibili.com/video/*
// @require      https://code.jquery.com/jquery-2.1.4.min.js
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @license      CC BY-NC-SA
// ==/UserScript==

//菜单按钮
let time1 = GM_registerMenuCommand("设置延迟时间为1秒", function (){
    GM_setValue("delayTime", 1000);
    clickMenu();
});
let time2 = GM_registerMenuCommand("设置延迟时间为1.5秒", function () {
    GM_setValue("delayTime", 1500);
    clickMenu();
});
let time3 = GM_registerMenuCommand("设置延迟时间为2秒", function () {
    GM_setValue("delayTime", 2000);
    clickMenu();
});
let time4 = GM_registerMenuCommand("设置延迟时间为2.5秒", function () {
    GM_setValue("delayTime", 2500);
    clickMenu();
});
let time5 = GM_registerMenuCommand("设置延迟时间为3秒", function () {
    GM_setValue("delayTime", 3000);
    clickMenu();
});
let time6 = GM_registerMenuCommand("设置延迟时间为3.5秒", function () {
    GM_setValue("delayTime", 3500);
    clickMenu();
});
let time7 = GM_registerMenuCommand("设置延迟时间为4秒", function () {
    GM_setValue("delayTime", 4000);
    clickMenu();
});
let time8 = GM_registerMenuCommand("设置延迟时间为4.5秒", function () {
    GM_setValue("delayTime", 4500);
    clickMenu();
});
let time9 = GM_registerMenuCommand("设置延迟时间为5秒", function () {
    GM_setValue("delayTime", 5000);
    clickMenu();
});

//点击菜单按钮后触发的通用事件
function clickMenu() {
    alert("已将延迟时间设置为" + GM_getValue("delayTime") / 1000 + "秒");
}

//执行代码
(function () {
    'use strict';

    if (GM_getValue("delayTime") <= 0) {
        GM_setValue("delayTime", 1500);
        console.log("当前延迟时间:" + GM_getValue("delayTime"));
    }

    //延迟3秒等待页面及其他脚本全部加载完毕后执行代码,否则会影响页面元素的加载及其他脚本的执行或干脆脚本执行后被后加载的页面逻辑覆盖掉
    setTimeout(function () {
        $(function () {
            //把标题栏移至视频下方
            $('#viewbox_report').insertAfter('#playerWrap');
            //把头像栏移至标题栏上方
            $('#v_upinfo').insertAfter('#viewbox_report');
            //
            //判断是新版界面还是旧版界面
            if ($('.v-wrap').length && $('.v-wrap').length > 0) {
                //旧版界面
                console.log("当前为旧版界面");
                //
                //调整标题栏样式
                //为标题栏添加底部横线
                GM_addStyle(".v-wrap .video-info {border-bottom-color: rgb(42, 53, 72)}");
                GM_addStyle(".v-wrap .video-info {border-bottom: 1px solid #e5e9f0;}");
                //调整标题栏高度
                GM_addStyle(".v-wrap .video-info {height: 91px}");
                GM_addStyle(".v-wrap .video-info {padding-top: 28px}");
                GM_addStyle(".v-wrap .video-info {padding-bottom: 12px}");
                //
                //调整头像栏样式
                //为头像蓝添加底部横线
                GM_addStyle(".v-wrap .up-info {border-bottom-color: rgb(42, 53, 72)}");
                GM_addStyle(".v-wrap .up-info {border-bottom: 1px solid #e5e9f0;}");
                //调整头像栏高度与标题栏一致
                GM_addStyle(".v-wrap .up-info {height: 79px;}");
                GM_addStyle(".v-wrap .up-info {padding-top: 16px}");
                GM_addStyle(".v-wrap .up-info {padding-bottom: 12px}");
                //调整头像栏宽度
                GM_addStyle(".up-info .up-info_right {width: 100%;}");
                GM_addStyle(".up-info .up-info_right {margin-left: 0px;}");
                //调整头像右边间隙
                GM_addStyle(".up-info .u-face {margin-right: -48px;}");
                //调整名称高度
                GM_addStyle(".up-info .up-info_right .name {line-height: 28px ! important;}");
                //调整名称左边间距
                GM_addStyle(".up-info .up-info_right .name {margin-left: 61px;}");
                //调整介绍高度
                GM_addStyle(".up-info .up-info_right .desc {margin-top: 10px;}");
                //调整介绍宽度
                GM_addStyle(".up-info .up-info_right .desc {width: 45%;}");
                GM_addStyle(".up-info .up-info_right .desc {margin-left: 61px;}");
                //调整充电和关注按钮与头像平齐
                GM_addStyle(".up-info .btn-panel .default-btn {margin-top: -51px;}");
                GM_addStyle(".up-info .btn-panel {margin-right: 6px;}");
                //调整充电和关注按钮高度和宽度
                GM_addStyle(".up-info .btn-panel .default-btn {height: 48px;}");
            } else {
                //新版界面
                console.log("当前为新版界面");
                //
                //调整标题栏样式
                //为标题栏添加底部横线
                GM_addStyle(".video-info-v1 {border-bottom-color: rgb(42, 53, 72)}");
                GM_addStyle(".video-info-v1 {border-bottom: 1px solid #e5e9f0;}");
                //调整标题栏高度
                GM_addStyle(".video-info-v1 {height: 98px}");
                GM_addStyle(".video-info-v1 {padding-top: 28px}");
                GM_addStyle(".video-info-v1 {padding-bottom: 12px}");
                //
                //调整头像栏样式
                //为头像蓝添加底部横线
                GM_addStyle(".up-info-v1 {border-bottom-color: rgb(42, 53, 72)}");
                GM_addStyle(".up-info-v1 {border-bottom: 1px solid #e5e9f0;}");
                //调整头像栏高度与标题栏一致
                GM_addStyle(".up-info-v1 {height: 60px;}");
                GM_addStyle(".up-info-v1 {padding-bottom: 12px}");
                //调整头像栏宽度
                GM_addStyle(".up-info-v1 .up-info_right {width: 100%;}");
                GM_addStyle(".up-info-v1 .up-info_right {margin-left: 0px;}");
                //调整名称高度
                GM_addStyle(".up-info-v1 .up-info_right .name {padding-top: 12px;}");
                //调整名称左边间距
                GM_addStyle(".up-info-v1 .up-info_right .name {margin-left: 13px;}");
                //调整介绍高度
                GM_addStyle(".up-info-v1 .up-info_right .desc {margin-top: 4px;}");
                //调整介绍宽度
                GM_addStyle(".up-info-v1 .up-info_right .desc {width: 54%;}");
                GM_addStyle(".up-info-v1 .up-info_right .desc {margin-left: 13px;}");
                //调整充电和关注按钮与头像平齐
                GM_addStyle(".up-info-v1 .btn-panel .default-btn {margin-top: -58px;}");
                GM_addStyle(".up-info-v1 .btn-panel {float: right;}");
                //调整充电和关注按钮高度和宽度
                GM_addStyle(".up-info-v1 .btn-panel .default-btn {height: 48px;}");
                GM_addStyle(".up-info-v1 .btn-panel .not-follow {width: 120px;}");
                GM_addStyle(".up-info-v1 .btn-panel .not-follow {margin-right: 10px;}");
                GM_addStyle(".up-info-v1 .btn-panel .not-follow-charge-btn {width: 70px;}");
                //调整三连栏上方空隙
                GM_addStyle(".video-toolbar-v1 {padding-top: 6px;}");
            }
        });
    }, GM_getValue("delayTime"));//这里的时间是毫秒,可以根据自己的电脑性能进行调整
})();