Greasy Fork is available in English.
【优化宽屏模式】此插件主要是为了兼容在宽屏模式下直接滚动至最上方会导致播放器不完整，所以把标题栏和头像移至视频下方
当前为
// ==UserScript==
// @name 哔哩哔哩标题及头像移至视频下方-优化BiliBili宽屏模式
// @namespace https://github.com/iMortRex
// @version 0.0.6
// @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_deleteValue
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @license CC BY-NC-SA
// ==/UserScript==
//菜单按钮
let time = GM_registerMenuCommand("更改延迟时间", function () {
timeClick();
});
let mode = GM_registerMenuCommand("更改模式", function () {
modeClick();
});
let autoWidescreen = GM_registerMenuCommand("开关自动宽屏模式", function () {
autoWidescreenClick();
});
//点击菜单按钮后触发的通用事件
function timeClick() {
if (GM_getValue("delayTime") == 1000) {
GM_setValue("delayTime", 1500);
} else if (GM_getValue("delayTime") == 1500) {
GM_setValue("delayTime", 2000);
} else if (GM_getValue("delayTime") == 2000) {
GM_setValue("delayTime", 2500);
} else if (GM_getValue("delayTime") == 2500) {
GM_setValue("delayTime", 3000);
} else if (GM_getValue("delayTime") == 3000) {
GM_setValue("delayTime", 3500);
} else if (GM_getValue("delayTime") == 3500) {
GM_setValue("delayTime", 4000);
} else if (GM_getValue("delayTime") == 4000) {
GM_setValue("delayTime", 4500);
} else if (GM_getValue("delayTime") == 4500) {
GM_setValue("delayTime", 5000);
} else if (GM_getValue("delayTime") == 5000) {
GM_setValue("delayTime", 1000);
}
alert("已将延迟时间设置为：" + GM_getValue("delayTime") / 1000 + "秒");
}
function modeClick() {
if (GM_getValue("mode") == 1) {
GM_setValue("mode", 2);
alert("已设置成：适配宽屏模式");
} else {
GM_setValue("mode", 1);
alert("已设置成：延迟模式");
}
}
function autoWidescreenClick() {
if (GM_getValue("autoWidescreenSwitch") == 1) {
GM_setValue("autoWidescreenSwitch", 2);
alert("已开启自动宽屏模式");
} else {
GM_setValue("autoWidescreenSwitch", 1);
alert("已关闭自动宽屏模式");
}
}
//执行代码
(function () {
'use strict';
//初始化全局变量
if (GM_getValue("delayTime") == null) {
GM_setValue("delayTime", 1500);
}
if (GM_getValue("mode") == null) {
GM_setValue("mode", 1);
}
if (GM_getValue("autoWidescreenSwitch") == null) {
GM_setValue("autoWidescreenSwitch", 1);
}
//自动宽屏模式
if (GM_getValue("autoWidescreenSwitch") == 1) {
const BILIBILI_PLAYER_SETTINGS = 'bilibili_player_settings';
const settings = JSON.parse(localStorage.getItem(BILIBILI_PLAYER_SETTINGS));
if (!settings) {
return;
}
settings.video_status.widescreensave = true;
settings.video_status.iswidescreen = true;
localStorage.setItem(BILIBILI_PLAYER_SETTINGS, JSON.stringify(settings));
}
modeCheck();
console.log("哔哩哔哩宽屏优化-正在检测宽屏模式");
function modeCheck() {
if (GM_getValue("mode") == 1) {
if (document.getElementById("bilibiliPlayer").classList.contains("mode-widescreen")) {
console.log("哔哩哔哩宽屏优化-宽屏模式已开启");
mainScript();
} else {
setTimeout(modeCheck, 150);
}
} else {
//延迟3秒等待页面及其他脚本全部加载完毕后执行代码，否则会影响页面元素的加载及其他脚本的执行或干脆脚本执行后被后加载的页面逻辑覆盖掉
setTimeout(function () {
mainScript();
}, GM_getValue("delayTime"));//这里的时间是毫秒，可以根据自己的电脑性能进行调整
}
}
function mainScript() {
console.log("哔哩哔哩宽屏优化-当前延迟时间：" + GM_getValue("delayTime"));
if (GM_getValue("mode") == 1) {
console.log("哔哩哔哩宽屏优化-当前模式：适配宽屏模式");
} else {
console.log("哔哩哔哩宽屏优化-当前模式：延迟模式");
}
//把标题栏移至视频下方
$('#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) ! important;}");
GM_addStyle(".v-wrap .video-info {border-bottom: 1px solid #e5e9f0 ! important;}");
//调整标题栏高度
GM_addStyle(".v-wrap .video-info {height: 91px ! important;}");
GM_addStyle(".v-wrap .video-info {padding-top: 28px ! important;}");
GM_addStyle(".v-wrap .video-info {padding-bottom: 12px ! important;}");
//
//调整头像栏样式
//为头像蓝添加底部横线
GM_addStyle(".v-wrap .up-info {border-bottom-color: rgb(42, 53, 72) ! important;}");
GM_addStyle(".v-wrap .up-info {border-bottom: 1px solid #e5e9f0 ! important;}");
//调整头像栏高度与标题栏一致
GM_addStyle(".v-wrap .up-info {height: 79px ! important;}");
GM_addStyle(".v-wrap .up-info {padding-top: 16px ! important;}");
GM_addStyle(".v-wrap .up-info {padding-bottom: 12px ! important;}");
//调整头像栏宽度
GM_addStyle(".up-info .up-info_right {width: 100% ! important;}");
GM_addStyle(".up-info .up-info_right {margin-left: 0px ! important;}");
//调整头像右边间隙
GM_addStyle(".up-info .u-face {margin-right: -48px ! important;}");
//调整名称高度
GM_addStyle(".up-info .up-info_right .name {line-height: 28px ! important;}");
//调整名称左边间距
GM_addStyle(".up-info .up-info_right .name {margin-left: 61px ! important;}");
//调整介绍高度
GM_addStyle(".up-info .up-info_right .desc {margin-top: 10px ! important;}");
//调整介绍宽度
GM_addStyle(".up-info .up-info_right .desc {width: 45% ! important;}");
GM_addStyle(".up-info .up-info_right .desc {margin-left: 61px ! important;}");
//调整充电和关注按钮与头像平齐
if ($('.up-info .btn-panel .charge-btn').length && $('.up-info .btn-panel .charge-btn').length > 0) {
//存在充电按钮
} else {
//不存在充电按钮
GM_addStyle(".up-info .btn-panel .not-follow {margin: 0 auto ! important;}");
GM_addStyle(".up-info .btn-panel .following {margin: 0 auto ! important;}");
}
GM_addStyle(".up-info .btn-panel {margin-right: -4px ! important;}");
//调整充电和关注按钮高度和宽度
GM_addStyle(".up-info .btn-panel .default-btn {height: 48px ! important;}");
GM_addStyle(".up-info .btn-panel .default-btn {margin-top: -51px ! important;}");
GM_addStyle(".up-info .btn-panel .not-follow {margin-right: 10px ! important;}");
GM_addStyle(".up-info .btn-panel .following {margin-right: 10px ! important;}");
} else {
//新版界面
console.log("哔哩哔哩宽屏优化-当前为新版界面");
//
//调整标题栏样式
//为标题栏添加底部横线
GM_addStyle(".video-info-v1 {border-bottom-color: rgb(42, 53, 72) ! important;}");
GM_addStyle(".video-info-v1 {border-bottom: 1px solid #e5e9f0 ! important;}");
//调整标题栏高度
GM_addStyle(".video-info-v1 {height: 98px ! important;}");
GM_addStyle(".video-info-v1 {padding-top: 28px ! important;}");
GM_addStyle(".video-info-v1 {padding-bottom: 12px ! important;}");
//
//调整头像栏样式
//为头像蓝添加底部横线
GM_addStyle(".up-info-v1 {border-bottom-color: rgb(42, 53, 72) ! important;}");
GM_addStyle(".up-info-v1 {border-bottom: 1px solid #e5e9f0 ! important;}");
//调整头像栏高度与标题栏一致
GM_addStyle(".up-info-v1 {height: 60px ! important;}");
GM_addStyle(".up-info-v1 {padding-bottom: 12px ! important;}");
//调整头像栏宽度
GM_addStyle(".up-info-v1 .up-info_right {width: 100% ! important;}");
GM_addStyle(".up-info-v1 .up-info_right {margin-left: 0px ! important;}");
//调整头像栏有装饰时的位置
if ($('.up-info-v1 .u-face.has-pendant').length && $('.up-info-v1 .u-face.has-pendant').length > 0) {
//存在头像装饰
GM_addStyle(".up-info-v1 .u-face.has-pendant {width: 48px ! important;}");
GM_addStyle(".up-info-v1 .u-face.has-pendant {height: 48px ! important;}");
GM_addStyle(".up-info-v1 .u-face.is-nft .u-face__avatar, .up-info-v1 .u-face.has-pendant .u-face__avatar {width: 40px ! important;}");
GM_addStyle(".up-info-v1 .u-face.is-nft .u-face__avatar, .up-info-v1 .u-face.has-pendant .u-face__avatar {height: 40px ! important;}");
GM_addStyle(".up-info-v1 .u-face.has-pendant .u-face__avatar {position: unset ! important;}");
} else {
//不存在头像装饰
}
//调整名称高度
GM_addStyle(".up-info-v1 .up-info_right .name {padding-top: 12px ! important;}");
//调整名称左边间距
GM_addStyle(".up-info-v1 .up-info_right .name {margin-left: 13px ! important;}");
//调整介绍高度
GM_addStyle(".up-info-v1 .up-info_right .desc {margin-top: 4px ! important;}");
//调整介绍宽度
GM_addStyle(".up-info-v1 .up-info_right .desc {width: 54% ! important;}");
GM_addStyle(".up-info-v1 .up-info_right .desc {margin-left: 13px ! important;}");
//调整充电和关注按钮与头像平齐
GM_addStyle(".up-info-v1 .btn-panel .default-btn {margin-top: -58px ! important;}");
GM_addStyle(".up-info-v1 .btn-panel {float: right ! important;}");
//调整充电和关注按钮高度和宽度
GM_addStyle(".up-info-v1 .btn-panel .default-btn {height: 48px ! important;}");
GM_addStyle(".up-info-v1 .btn-panel .not-follow {width: 120px ! important;}");
GM_addStyle(".up-info-v1 .btn-panel .not-follow {margin-right: 10px ! important;}");
GM_addStyle(".up-info-v1 .btn-panel .not-follow-charge-btn {width: 70px ! important;}");
//调整三连栏上方空隙
GM_addStyle(".video-toolbar-v1 {padding-top: 6px ! important;}");
}
window.scrollTo(0, 0);
}
})();