调整B站网页版视频详情页右侧的合集列表（带封面的视频合集、选集视频合集、仅标题视频合、带分类的视频合集），使得可以根据窗口大小上下铺满，标题显示得更长；去除几处广告；去除页面右侧底部的直播banner位
当前为
// ==UserScript==
// @name B站视频详情页优化
// @license MIT
// @namespace https://sumver.cn
// @version 1.0.5
// @description 调整B站网页版视频详情页右侧的合集列表（带封面的视频合集、选集视频合集、仅标题视频合、带分类的视频合集），使得可以根据窗口大小上下铺满，标题显示得更长；去除几处广告；去除页面右侧底部的直播banner位
// @author lonelylizard
// @match https://www.bilibili.com/video/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// 去除右侧广告
GM_addStyle(`#slide_ad{display:none`);
GM_addStyle(`.ad-report[data-v-e79faaca] {display:none !important;min-width:0px !important;min-height:0px !important}`);
// 去除简介下广告
GM_addStyle(`#activity_vote{display:none !important}`);
// 去除右下角直播窗口
GM_addStyle(`.pop-live-small-mode{display:none !important}`);
// 去除右侧游戏广告卡片
GM_addStyle(`.video-page-game-card-small{display:none !important}`);
// 让视频列表内的视频项标题显示得更多
GM_addStyle(`.base-video-sections-v1 .video-section-list .video-episode-card__info-title[data-v-10d2177a]{width:100% !important}`);
var targetNode = "";
// 选择需要观察变动的节点
if(document.getElementsByClassName('video-sections-content-list')[0]){
// fn1,fn2,fn3情况共同拥有video-sections-content-list，一起监听
targetNode = document.getElementsByClassName('video-sections-content-list')[0];
}else if(document.getElementsByClassName('multi-page-v1')[0]){
// fn4情况
targetNode = document.getElementsByClassName('multi-page-v1')[0];
}
// 观察器的配置（需要观察什么变动）
const config = {
attributes: false, // 开启监听属性
childList: true, // 开启监听子节点
subtree: true // 开启监听子节点下面的所有节点
};
// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
// console.log('子节点有变化');
if(document.querySelector(".base-video-sections-v1")){
fn1();
}
if(document.querySelector(".video-sections-v1")){
fn2();
}
if(document.querySelector("video-section-title")){
fn3();
}
if(document.querySelector(".multi-page-v1")){
fn4()
}
return;
}
// else if (mutation.type === 'attributes') {
// console.log('The ' + mutation.attributeName + ' 属性有变化');
// }
}
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
try{
observer.observe(targetNode, config);
}
catch(err) {
// console.log("节点不存在");
}
// 之后，可停止观察
// observer.disconnect();
// 针对不带封面的视频合集列表
let fn1 = function(){
if(document.querySelector(".base-video-sections-v1")){
if(document.querySelector(".video-episode-card")){
let list_height = document.querySelector(".video-section-list").scrollHeight;
let res_height = window.innerHeight;
let right_content_top_heigt = document.querySelector(".base-video-sections-v1").offsetTop;
let dif_height = res_height - right_content_top_heigt - 150;
// 计算列表高度，如果达不到一屏就不铺满
if(list_height > dif_height){
GM_addStyle(`.video-sections-content-list{height: ${dif_height}px !important;max-height:1000px !important}`);
}else{
let temp_height = list_height + 10
GM_addStyle(`.video-sections-content-list{height: ${temp_height}px !important;max-height:1000px !important}`);
}
return;
}
}
};
// 针对带封面的视频合集列表
let fn2 = function(){
if(document.querySelector(".video-sections-v1")){
if(document.querySelector(".video-episode-card")){
let list_height = document.querySelector(".video-section-list").scrollHeight;
console.log(list_height);
let res_height = window.innerHeight;
var right_content_top_heigt = document.querySelector(".video-sections-v1").offsetTop;
var dif_height = res_height - right_content_top_heigt -160;
// 计算列表高度，如果达不到一屏就不铺满
if(list_height > dif_height){
GM_addStyle(`.video-sections-content-list{height: ${dif_height}px !important;max-height:1000px !important}`);
}else{
let temp_height = list_height + 10
GM_addStyle(`.video-sections-content-list{height: ${temp_height}px !important;max-height:1000px !important}`);
}
}
}
};
// 针对带分类的视频合集列表
let fn3 = function(){
if(document.querySelector(".base-video-sections-v1")){
if(document.querySelector(".video-section-title")){
let list_height = window.innerHeight;
let right_content_top_heigt = document.querySelector(".base-video-sections-v1").offsetTop;
let dif_height = list_height - right_content_top_heigt - 150;
// 默认一屏
GM_addStyle(`.video-sections-content-list{height: ${dif_height}px !important;max-height:1000px !important}`);
}
}
};
// 针对带选集（分P）的视频合集列表
let fn4 = function(){
if(document.querySelector(".multi-page-v1")){
if(document.querySelector(".cur-list")){
let res_height = window.innerHeight;
let list_height = document.querySelector(".list-box").scrollHeight;
let right_content_top_heigt = document.querySelector(".multi-page-v1").offsetTop;
let dif_height = res_height - right_content_top_heigt - 120;
console.log(dif_height);
// 计算列表高度，如果达不到一屏就不铺满
if(list_height > dif_height){
GM_addStyle(`.cur-list {height: ${dif_height}px !important;max-height:1000px !important}`);
}else{
GM_addStyle(`.cur-list {height: ${list_height}px !important;max-height:1000px !important}`);
}
} }
};
// 窗口大小变化时调整合集列表大小
const getWindowInfo = () => {
// console.log("窗口发生变化");
fn1();
fn2();
fn3();
fn4();
};
const debounce = (fn, delay) => {
let timer;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn();
}, delay);
}
};
const cancalDebounce = debounce(getWindowInfo, 500);
window.addEventListener('resize', cancalDebounce);
fn1();
fn2();
fn3();
fn4();
window.addEventListener('pushState', function(e) {
fn1();
fn2();
fn3();
fn4();
});
window.addEventListener('replaceState', function(e) {
fn1();
fn2();
fn3();
fn4();
});
// B站视频详情页的自动播放下一个视频，或者点击其他视频，使用的是pushState不会刷新页面，这里需要重写pushState、replaceState为来实现监听页面视频是否切换
const bindEventListener = function(type) {
const historyEvent = history[type];
return function() {
const newEvent = historyEvent.apply(this, arguments);
const e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return newEvent;
};
};
history.pushState = bindEventListener('pushState');
history.replaceState = bindEventListener('replaceState');
// 浏览器前进、后退时，重新计算高度
window.onpopstate = function(event) {
fn1();
fn2();
fn3();
fn4();
};
})();