// ==UserScript== // @name B站|bilibili 分P视频详情页优化 // @license MIT // @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAyZJREFUaEPtWlFy2jAQ3XXof5pewJkpmekpAidJ+IQeAnKIwifkJDin6EzoTNwDlOYA4O2sVIEsFFuSkQdm8CfI0r6VdvftkxHO/MEQ+7/8eH3cJtvsffgtD3nf9s71bNV7H3Yz3/m8AdzMVmMgmPBCBW5um4K4nv1MkTpzBOgBwmQ97D75gPAHMH19A8BULdIEBBufUOdtbzDl69HdbVQActGrZVMQh8bzjkLf9xh57wB7xwYCiQZ/vt8tXLx3LON5rSAATUBwsCYESx1oiOfV+8EAQkAcGk95gTjwPTY6+AMAYhHAByJKEWgXrNVHYx/Uchx9kF7NcXIsAdamY0TICtg8m1mvBODzdLUU6eyEHzPWdgDOwfidX7V6IQDoxemEnV827T8ItKW0cwHBRRQ/8j6fNeY7pwGmkyZEc714ihpANMCb2a85ED2WDfUv6bGB2uoHIC7QGrwBpCo2ABGr0xXp6xBAdgHQhufVGpcdqPK2T5fGqRugkwJscp+G6Gg7wMYKFpMk90BFT6U3V0qtp24ORJESBdeBlypQwQBEsYNPY91Y624gLtbDr4O6uKiv/JLgEW4G+g41A1Bq/ewmsjf/jrr9OgCuvGs96pbIZjAAmYPLvXDJSMQF02Is6LdLVyYpO9wTQU9SdjvNNvvjZgBExS56gEmGRfGyTZjD+wVh1c4cgBLHsaxQNAJQdyza+P8CoA0vV61x2YGQHeCi55KZXOaOvgMmnVAFS5cfFY0IkVKiAmDjCXEu6gHBk6QZWqOEMOE6IceECcNRAezFATZaFSbKuW6YFMSVM5nHKjoAXlAVJPa2ukNQvwnPW8Qpl/N/6chcvRRzXCtHqE0AImFYZRVHXh/TWHNuqwDHmW2f/kqCRV7gtu/T7sUGY22CGEAV1xe6C9ZL37GNl1K/qZpL8e38xV3lPbvEGNu3YfPrrWu557TqpGGLxHrL7LutV0xIMG73poavpA77YiW5sDM4FgugZ5MEOl3yWZVhOJ6Cbc2EjgKzEwBbpmpyNWo7Xqbq4foFgDMARdSuCkqP/aGHnJvFs86DTgJd4sgLgMuEbY/5B0Ybna/xpe4TAAAAAElFTkSuQmCC // @namespace https://sumver.cn // @version 1.2.9 // @description 调整bilibili 分P视频合集列表，使得可以根据窗口大小上下铺满，标题显示得更长；适配宽屏显示；支持竖屏显示超长合集；支持小窗尺寸设置；支持右侧视频列表自定义宽度；支持视频列表标题换行显示；以及一些其他的调整 // @author lonelylizard // @match https://www.bilibili.com/video/* // @match https://www.bilibili.com/list/* // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== // @grant GM_addStyle // @grant GM_registerMenuCommand // @grant GM_setValue // @grant GM_getValue // @run-at document-end // @downloadURL none // ==/UserScript== // 添加控制菜单 // 宽屏适配开关 const menu_widescreen_status = GM_registerMenuCommand("1、宽屏适配开关", function() { let cur_choose = window.confirm("当前宽屏适配状态:\n" + (GM_getValue("widescreen_status") === true ? "已开启" : "已关闭")+"\n\n按【确认】修改状态，按【取消】保持设置不变\n注：只有在【视频合集宽度调整】未开启或设置为0时，宽屏模式才会生效\n设置后请手动刷新一次网页"); if(cur_choose){ if(GM_getValue("widescreen_status")){ GM_setValue("widescreen_status",false) }else{ GM_setValue("widescreen_status",true) } } }); // 小窗尺寸设置开关 const miniwin_status = GM_registerMenuCommand("2、小窗尺寸设置（试验）", function() { let num = window.prompt("小窗缩放倍率，在1.1~3之间是最合理的，\n推荐倍率1.6~2.0尺寸最佳\n如设置后出现问题，请输入0即可恢复原尺寸的小窗") // 调整小窗大小 if(typeof(Number(num)) === 'number'){ if(num.toString().split('.').pop().length <=2){ let ori_area = document.querySelector("#bilibili-player-placeholder") // 原始小窗：360* 203 let o_height = 203 let o_width = 360 let sc_height = Math.round(o_height *num,2) let sc_width = Math.round(o_width *num,2) if(num!=0){ GM_addStyle(`@media screen and (min-width: 1681px){ .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${sc_height}px !important; width:${sc_width}px !important; } .bpx-player-video-perch, .bpx-player-video-area, .bpx-player-video-wrap{ height:inherit !important; width:inherit !important; } }`); GM_addStyle(` .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${sc_height}px !important; width:${sc_width}px !important; } .bpx-player-video-perch, .bpx-player-video-area, .bpx-player-video-wrap{ height:inherit !important; width:inherit !important; }`); // 保存设置 GM_setValue("mini_height",sc_height) GM_setValue("mini_width",sc_width) }else{ // 重置尺寸 GM_setValue("mini_height",0) GM_setValue("mini_width",0) // 恢复小窗 GM_addStyle(`@media screen and (min-width: 1681px){ .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${o_height}px !important; width:${o_width}px !important; } }`); GM_addStyle(` .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${o_height}px !important; width:${o_width}px !important; }`); } } } }); // 视频列表标题换行开关 const menu_title_wrap_status = GM_registerMenuCommand("3、视频列表标题换行开关（试验）", function() { let cur_choose = window.confirm("使得右侧视频合集支持标题换行显示\n当前状态:\n" + (GM_getValue("title_wrap_status") === true ? "已开启" : "已关闭")+"\n\n按【确认】修改状态，按【取消】保持设置不变\n\n设置后请手动刷新一次网页"); if(cur_choose){ if(GM_getValue("title_wrap_status")){ GM_setValue("title_wrap_status",false) }else{ GM_setValue("title_wrap_status",true) } } }); // 视频合集列表比例调整开关 const menu_area_ratio = GM_registerMenuCommand("4、视频合集列表宽度调整（试验）", function() { let area_ratio_prompt = window.prompt("输入0.5表示视频列表占屏幕一半，输入0.25表示占屏幕1/4，\n当前比率:\n" + (GM_getValue("area_ratio")!=0 && typeof(GM_getValue("area_ratio"))!= 'undefined' ?GM_getValue("area_ratio"):"未设置")+"\n\n按【确认】修改状态，按【取消】保持设置不变\n如设置导致页面混乱，请输入0还原页面\n\n注意：该功能开启时，宽屏模式会自动关闭\n设置后请手动刷新一次网页"); if(typeof(Number(area_ratio_prompt)) === 'number'){ if(area_ratio_prompt.toString().split('.').pop().length <=2){ GM_setValue("area_ratio",area_ratio_prompt) } } }); // 视频列表标题换行开关 const no_videos_list_support = GM_registerMenuCommand("5、让非分P视频页支持宽屏、自定义比例开关（试验）", function() { let cur_choose = window.confirm("让普通的视频播放页（没有视频合集），也按照宽屏或自定义比例进行显示\n当前状态:\n" + (GM_getValue("no_videos_list_support_status") === true ? "已开启" : "已关闭")+"\n\n该功能需要【视频合集列表宽度调整】或【宽屏适配开关】开启状态才生效\n按【确认】修改状态，按【取消】保持设置不变\n设置后请手动刷新一次网页"); if(cur_choose){ if(GM_getValue("no_videos_list_support_status")){ GM_setValue("no_videos_list_support_status",false) }else{ GM_setValue("no_videos_list_support_status",true) } } }); (function() { 'use strict'; // 样式处理 let setStyle = function(css){ let css_list = css.split("}") css_list.forEach((item,index,array) => { GM_addStyle(item+"}") }); } // 屏蔽广告 let no_ad_fn = function(){ let css = `#slide_ad { display: none } /* 去除右侧广告 */ .ad-report { display: none !important; min-width: 0px !important; min-height: 0px !important } /* 去除简介下广告 */ #activity_vote { display: none !important } /* 去除右下角直播窗口 */ .pop-live-small-mode { display: none !important } /* 去除右侧游戏广告卡片 */ .video-page-game-card-small { display: none !important } /* 去除视频下方的广播广告 */ .reply-notice { display: none !important }` setStyle(css) } no_ad_fn() 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) { 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() } chapter_dispose() 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("节点不存在"); } // 针对不带封面的视频合集列表 let fn1 = function(){ if(document.querySelector(".base-video-sections-v1")){ if(document.querySelector(".video-episode-card")){ // 带分类视频和仅标题视频合集有相同的外层div，从这里区分开两种类型 if(document.querySelector(".video-section-title")){ change_right_width("fn3") change_title_wrap("fn3") fn3() }else{ change_right_width("fn1") change_title_wrap("fn1") 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; // 判断小节是否展开 let viewpoint_status = false if(document.querySelector(".bpx-player-viewpoint")){ if(document.querySelector(".bpx-player-viewpoint").getAttribute('fold') == 'true'){ viewpoint_status = true } } // 没有字幕插件、没有小节，那就正常显示 if(!document.querySelector(".transcript-box") && viewpoint_status == false){ if(list_height > dif_height){ // 计算列表高度，如果达不到一屏就不铺满 let css = `.video-sections-content-list { height: ${dif_height}px !important; max-height: 1000px !important }` setStyle(css) }else{ // 如果高度小于一屏，同时开始换行功能，会导致高度不正确，这里修改为去除高度属性，让其自适应 let css =`.video-sections-content-list { height: unset !important; max-height: 1000px !important }` setStyle(css) } }else{ // 兼容脚本：在侧边显示 Bilibili 视频字幕/文稿(原始版) // 兼容小节列表 if(list_height > res_height){ let css =`.video-sections-content-list { height: ${res_height-280}px !important; max-height: 1000px !important }` setStyle(css) }else{ let css = `.video-sections-content-list { height: unset !important; max-height: 1000px !important; border-width:2px !important }` setStyle(css) } } let css = `.video-episode-card__info-title { width: 100% !important } .video-episode-card__info:hover { background: #DCE2E3 } .video-episode-card__info-title:hover { color: #000 !important } .video-episode-card__info:hover .video-episode-card__info-title { color: #000 !important } /* 调整合集总标题 */ .first-line-left{ width:70% !important; } .base-video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title{ white-space:normal !important }` setStyle(css) } } } }; // 针对带封面的视频合集列表 let fn2 = function(){ if(document.querySelector(".video-sections-v1")){ if(document.querySelector(".video-episode-card")){ change_right_width("fn2"); change_title_wrap("fn2"); let list_height = document.querySelector(".video-section-list").scrollHeight; 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; // 判断小节是否展开 let viewpoint_status = false if(document.querySelector(".bpx-player-viewpoint")){ if(document.querySelector(".bpx-player-viewpoint").getAttribute('fold') == 'true'){ viewpoint_status = true } } // 没有字幕插件、没有小节，那就正常显示 if(!document.querySelector(".transcript-box") && viewpoint_status == false){ if(list_height > dif_height){ let css = `.video-sections-content-list { height: ${dif_height}px !important; max-height: 1000px !important }` setStyle(css) }else{ let css = `.video-sections-content-list { height: unset !important; max-height: 1000px !important }` setStyle(css) } }else{ // 兼容脚本：在侧边显示 Bilibili 视频字幕/文稿(原始版) if(list_height > res_height){ let css = `.video-sections-content-list { height: ${res_height-280}px !important; max-height: 1000px !important }` setStyle(css) }else{ let css = `.video-sections-content-list { height: unset !important; max-height: 1000px !important }` setStyle(css) } } let css = ` /* 添加滑动鼠标一个浅的聚焦颜色 */ .video-episode-card:hover { background: #DCE2E3 } /* 去除字体蓝色提醒 */ .video-episode-card:hover .video-episode-card__info-title { color: #000 !important } .video-episode-card{ border-radius: 4px !important; height: auto !important; margin-bottom: 10px !important; } /* 让标题（最大2行）区域跟图片高度对齐，以优化聚焦效果 */ .video-episode-card__info{ height:60px !important; margin-right: 3px !important } .video-episode-card__info__number{ margin-top: -2px !important; } /* 调整合集总标题 */ .first-line-left{ width:70% !important; } .video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title{ white-space:normal !important }` setStyle(css) } } }; // 针对带分类的视频合集列表 let fn3 = function(){ if(document.querySelector(".base-video-sections-v1")){ if(document.querySelector(".video-section-title")){ change_right_width("fn3"); 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; // 兼容脚本：在侧边显示 Bilibili 视频字幕/文稿(原始版) // 判断小节是否展开 let viewpoint_status = false if(document.querySelector(".bpx-player-viewpoint")){ if(document.querySelector(".bpx-player-viewpoint").getAttribute('fold') == 'true'){ viewpoint_status = true } } // 没有字幕插件、没有小节，那就正常显示 if(!document.querySelector(".transcript-box") && viewpoint_status == false){ // 默认一屏 let css = `.video-sections-content-list { height: ${dif_height}px !important; max-height: 1000px !important }` setStyle(css) }else{ let css = `.video-sections-content-list { height: ${list_height-280}px !important; max-height: 1000px !important }` setStyle(css) } let css = `/* 加宽视频列表标题 */ .video-episode-card__info-title { width: 100% !important } /* 分类颜色和视频标题一样，略做修改增加辨识度 */ .video-section-title { background-color: #E4E6E8 !important } /* 去除分类区域奇怪的圆角 */ .video-sections-content-list { border-radius: 0px !important } /* 重设分割线 */ .border-bottom-line { background: #F1F2F3 !important } /* 添加滑动鼠标一个浅的聚焦颜色 */ .video-episode-card__info:hover { background: #DCE2E3 } /* 去除字体蓝色提醒 */ .video-episode-card__info-title:hover { color: #000 !important } .video-episode-card:hover .video-episode-card__info-title { color: #000 !important } /* 分类名调整为圆角 */ .video-section-title { border-radius:5px !important; margin-left:4px !important } /* 调整合集总标题 */ .first-line-left{ width:70% !important; } .base-video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title{ white-space:normal !important }` setStyle(css) } } }; // 针对带选集（分P）的视频合集列表 let fn4 = function(){ if(document.querySelector(".multi-page-v1")){ if(document.querySelector(".cur-list")){ change_right_width("fn4"); change_title_wrap("fn4"); 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; // 判断小节是否展开 let viewpoint_status = false if(document.querySelector(".bpx-player-viewpoint")){ if(document.querySelector(".bpx-player-viewpoint").getAttribute('fold') == 'true'){ viewpoint_status = true } } // 没有字幕插件、没有小节，那就正常显示 if(!document.querySelector(".transcript-box") && viewpoint_status == false){ if(list_height > dif_height){ let css = `.cur-list { height: ${dif_height}px !important; max-height: 1000px !important }` setStyle(css) }else{ let css = `.cur-list { height: ${list_height}px !important; max-height: 1000px !important }` setStyle(css) } }else{ // 兼容脚本：在侧边显示 Bilibili 视频字幕/文稿(原始版) if(list_height > res_height){ let css = `.cur-list { height: ${res_height-280}px !important; max-height: 1000px !important }` setStyle(css) }else{ let css = `.cur-list { height: ${list_height}px !important; max-height: 1000px !important }` setStyle(css) } } // 添加滑动鼠标一个浅的聚焦颜色 let css = `.list-box>li:hover { background: #DCE2E3 !important }` setStyle(css) } } }; // 宽屏适配+自定义设置比率 let change_right_width = function(source){ // 如果有自定义比率，则优先使用 if (GM_getValue("area_ratio") && GM_getValue("area_ratio")!=0){ let body_width = document.querySelector("#app").offsetWidth; let res_width = window.innerWidth; var dif_width = Math.round(res_width*GM_getValue("area_ratio")); let player_banner_height = document.querySelector(".bpx-player-sending-bar").offsetHeight; // 如果.playlist-container--left存在，那就是全部视频列表 if(document.querySelector(".playlist-container--left")){ let css = `/* 调整合集宽度 */ .playlist-container--right { width: ${dif_width}px !important } .playlist-container--left { width: ${body_width-dif_width-50}px !important; } #playerWrap { height:unset !important } #bilibili-player{ width: ${body_width-dif_width-50}px !important; height:${0.5625*(body_width-dif_width-50)+player_banner_height}px !important } /* 这里不要使用important，因为后面小窗的尺寸计算调整会需要更高的优先级，这里写了important会导致小窗尺寸可能被覆盖 */ .bpx-player-video-perch,.bpx-player-video-area,.bpx-player-video-wrap{ width: ${body_width-dif_width-50}px; height:${0.5625*(body_width-dif_width-50)}px }` setStyle(css) }else{ // 设置播放器尺寸 let css = `/* 调整合集名称长度 */ .first-line-left>a { max-width: ${dif_width}px !important } /* 调整合集宽度 */ .right-container { width: ${dif_width}px !important } .left-container { width: ${body_width-dif_width-50}px !important; } #playerWrap { height:unset !important } #bilibili-player{ width: ${body_width-dif_width-50}px !important; height:${0.5625*(body_width-dif_width-50)+player_banner_height}px !important } /* 这里不要使用important，因为后面小窗的尺寸计算调整会需要更高的优先级，这里写了important会导致小窗尺寸可能被覆盖 */ .bpx-player-video-perch,.bpx-player-video-area,.bpx-player-video-wrap{ width: ${body_width-dif_width-50}px; height:${0.5625*(body_width-dif_width-50)}px }` setStyle(css) } // console.log("检测到自定义比例") //不同的合集页需要单独适配 if(source == "fn1"){ let css = `.video-episode-card__info-title { width: 100% !important } /* 调整标题宽度 */ .video-episode-card__info-title { width: 100% !important }` setStyle(css) } if(source == "fn2"){ let css = ` /* 调整合集名称长度 */ .first-line-left>a { max-width: ${dif_width}px !important } /* 调整合集内视频标题的宽度 */ .video-sections-item { width: 95% !important }` setStyle(css) } if(source == "fn3"){ let css = `/* 调整合集名称长度 */ .first-line-left>a { max-width: ${dif_width}px !important } /* 调整标题宽度 */ .video-episode-card__info-title { width: 100% !important }` setStyle(css) } if(source == "fn4"){ //分P视频无需调整标题宽度，因为选集名称固定为“视频选集” let css = `/* 合集内需要单独调整 */ #multi_page .cur-list .list-box>li { width: ${dif_width}px } /* 分P视频合集的分P时长偏右，微调 */ .cur-list>ul>li>a { margin-right: 15px !important }` setStyle(css) } }else if(GM_getValue("widescreen_status")){ // console.log("检测到开启了宽屏") let body_width = document.querySelector("#app").offsetWidth; let res_width = window.innerWidth; if(res_width-100 > body_width){ //带鱼屏 let left_div = document.querySelector(".left-container").offsetWidth; let right_div = document.querySelector(".right-container").offsetWidth; var dif_width = (body_width - (left_div+right_div))+right_div-100; }else{ //非带鱼屏 let left_div = document.querySelector(".left-container").offsetWidth; let right_div = document.querySelector(".right-container").offsetWidth; var dif_width = (res_width - (left_div+right_div))+right_div-80; } //不同的合集页需要单独适配 if(source == "fn1"){ let css = `/* 调整合集名称长度 */ .first-line-left>a { max-width: ${dif_width-200}px !important } /* 调整合集宽度 */ .right-container { width: ${dif_width}px !important } /* 调整标题宽度 */ .video-episode-card__info-title { width: 100% !important }` setStyle(css) } if(source == "fn2"){ let css = `/* 调整合集名称长度 */ .first-line-left>a { max-width: ${dif_width-200}px !important } /* 调整合集宽度 */ .right-container { width: ${dif_width}px !important } /* 调整合集内视频标题的宽度 */ .video-sections-item { width: 95% !important }` setStyle(css) } if(source == "fn3"){ let css = `/* 调整合集名称长度 */ .first-line-left>a { max-width: ${dif_width-200}px !important } /* 调整合集宽度 */ .right-container { width: ${dif_width}px !important }` setStyle(css) } if(source == "fn4"){ //分P视频无需调整标题宽度，因为选集名称固定为“视频选集” let css = `/* 调整合集宽度 */ .right-container { width: ${dif_width}px !important } /* 合集内需要单独调整 */ #multi_page .cur-list .list-box>li { width: ${dif_width}px } /* 分P视频合集的分P时长偏右，微调 */ .cur-list>ul>li>a { margin-right: 15px !important }` setStyle(css) } // 没有参数即为普通视频页 if(!source){ let css = `.right-container { width: ${dif_width}px !important }` setStyle(css) } } } // 支持自定义视频合集（如UP空间-播放全部、收藏夹-播放全部） let no_videos_list_change_right_width = function(){ if(document.querySelector(".playlist-container--left")){ // 计算列表高度，如果达不到一屏就不铺满 let list_height = document.querySelector(".action-list-inner").scrollHeight; let res_height = window.innerHeight; var right_content_top_heigt = document.querySelector(".action-list-container").offsetTop; var dif_height = res_height - right_content_top_heigt-10; if(!document.querySelector(".transcript-box")){ if(list_height > dif_height){ let css = `.action-list-container { height: ${dif_height}px !important; max-height: 1000px !important } #playlist-video-action-list{ max-height:1000px !important } .playlist-video-action-list-body,.action-list-body-bottomaction-list-body-bottom,playlist-video-action-list{ height:100% !important }` setStyle(css) }else{ let css = `.action-list-container { height: unset !important; max-height: 1000px !important } #playlist-video-action-list-body,#playlist-video-action-list{ max-height: 1000px !important }` setStyle(css) } }else{ // 兼容脚本：在侧边显示 Bilibili 视频字幕/文稿(原始版) if(list_height > res_height){ let css = `.action-list-container { height: ${res_height-280}px !important; max-height: 1000px !important }` setStyle(css) }else{ let css = `.action-list-container { height: unset !important; max-height: 1000px !important }` setStyle(css) } } let css = `/* 增加聚焦效果 */ .action-list-item:hover { background: #DCE2E3; border-radius: 6px !important; } /* 去除蓝色字体提醒 */ .action-list-item:hover .title { color: #000 !important }` setStyle(css) } } // 非视频合集的播放页这次自定义比例、宽屏模式 let support_no_video_list = function(){ if(GM_getValue("no_videos_list_support_status")){ change_right_width() } } // 视频合集换行功能，不限制标题行数 let change_title_wrap = function(source){ if(GM_getValue("title_wrap_status")){ if(source=="fn1"){ let css = `.base-video-sections-v1 .video-section-list .video-episode-card__info-title { white-space: normal !important; flex-wrap: wrap !important; max-height: 300px !important } .base-video-sections-v1 .video-section-list{ height: 100% !important } .video-episode-card{ height:120% !important } .video-section-list { height: 100% !important } /*因为换行会改变整体高度，这里需要重写高度 换行后会导致视频列表项不明显，这里加宽了项之间的间距*/ .video-episode-card__info { height: 100% !important; min-height:30px !important; }` setStyle(css) } if(source=="fn2"){ //不处理，因为默认支持2行，足够显示长标题 } if(source=="fn3"){ let css = `.video-episode-card__info-title { white-space: normal !important; max-height: unset !important } .base-video-sections-v1 .video-section-list .video-episode-card__info { height: unset !important } .base-video-sections-v1 .video-section-list .video-episode-card { height: unset !important } /* todo:现在这么设置意味着收起分类功能会失效，但是想着全展开也没啥不好的，暂时不做修复 */ .video-section-list { height: 100% !important } /* 换行后会导致视频列表项不明显，这里加宽了项之间的间距 */ .video-episode-card__info { height: 100% !important; min-height:30px !important; }` setStyle(css) } if(source=="fn4"){ let css = `.multi-page-v1 .cur-list .list-box li { white-space: normal !important; height: unset !important; } /* 换行后会导致视频列表项不明显，这里缩小标题文字换行间距 */ .part { line-height: normal !important }` setStyle(css) } } } // 小节处理函数 let chapter_dispose = function(){ let res_height = window.innerHeight; let css = ` .bpx-player-viewpoint-body{ max-height:${res_height-280}px; height:min-content !important } li.bpx-player-viewpoint-menu-item:hover{ background: #DCE2E3 !important } li.bpx-player-viewpoint-menu-item:hover .bpx-player-viewpoint-menu-item-content{ color: #000 !important } .bpx-player-viewpoint-menu-item-content :has(.bpx-player-viewpoint-menu-item-active{ color:#00a1d !important } ` setStyle(css) } // 小窗处理函数 const mini_win_fn = function(){ // 初始化小窗大小 if(GM_getValue("mini_height") != 0 ){ let css = `@media screen and (min-width: 1681px){ .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${GM_getValue("mini_height")}px !important; width:${GM_getValue("mini_width")}px !important; } /* 这里需要使用继承inherit，否则小窗显示内容、主体视频播放器尺寸都会异常 */ .bpx-player-video-perch, .bpx-player-video-area, .bpx-player-video-wrap{ height:inherit !important; width:inherit !important; } } .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${GM_getValue("mini_height")}px !important; width:${GM_getValue("mini_width")}px !important; }` setStyle(css) }else if(typeof(GM_getValue("mini_height")) == 'undefined' || GM_getValue("mini_height") == 0){ // 小窗默认比例 360*203 let o_height = 203 let o_width = 360 let css = `@media screen and (min-width: 1681px){ .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${o_height}px !important; width:${o_width}px !important; } /* 这里需要使用继承inherit，否则小窗显示内容、主体视频播放器尺寸都会异常 */ .bpx-player-video-perch, .bpx-player-video-area, .bpx-player-video-wrap{ height:inherit !important; width:inherit !important; } } /* 恢复到小窗默认尺寸 */ .bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]{ height:${o_height}px !important; width:${o_width}px !important; }` setStyle(css) } } // 超竖屏支持 // 竖屏下，阿B原来的最小宽度适配是width=1080px，但是这会在实际1080P分辨率屏幕下内容向右溢出，此处调整为1000px修复该问题 const support_portrait_fn = function(){ let css = `#mirror-vdcon{ min-width:1000px !important }` setStyle(css) } // 统一调用入口 let run = function(){ fn1(); fn2(); fn3(); fn4(); chapter_dispose(); mini_win_fn(); support_no_video_list(); no_videos_list_change_right_width(); support_portrait_fn() } run() // 窗口大小变化时重新计算 const getWindowInfo = () => { run() }; 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); window.addEventListener('pushState', function(e) { run() }); window.addEventListener('replaceState', function(e) { run() }); // 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) { run() }; })();