// ==UserScript==
// @name 哔哩哔哩（B站）评论区显示楼层
// @description （2022/06可用）bilibili哔哩哔哩网页端视频、番剧、动态等页面显示评论区楼层与楼中楼楼层，理论兼容Bilibill Evolved
// @author lchzh3473 , Modify by Tinhone
// @namespace Original by lchzh3473 , Modify by Tinhone
// @license GPL-3.0
// @version 1.6.0
// @icon https://app.bilibili.com/favicon.ico
// @grant none
// @compatible firefox V70+
// @compatible edge V70+
// @compatible chrome V70+
// @match *://www.bilibili.com/video/*
// @match *://www.bilibili.com/read/cv*
// @match *://www.bilibili.com/bangumi/play/*
// @match *://t.bilibili.com/*
// @match *://space.bilibili.com/*
// @match *://workshop.bilibili.com/illust/*
// @match *://workshop.bilibili.com/live2d/*
// @exclude *://t.bilibili.com/
// @run-at document-end
// ==/UserScript==
(function() {
//代码看起来长，实际上只是一个功能对于四个页面的分别适配，看if (whichPage=="0")这一段就可以大概理解整个脚本了(～￣▽￣)～
'use strict';
const newVideoPage="html body.harmony-font.header-v2.win div#app.app-v1 div.video-container-v1 div.left-container div.left-container-under-player div#comment.comment-m-v1" //新版视频页特征
const oldVideoPage=".comment-m .common .b-head" //旧版视频页特征
const workshopLive2dPage="div.live2d div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix" //创意工坊live2d页面特征
const workshopIllustPage="div.illust div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix" //创意工坊插画页面特征
//新版视频页总楼层数，VP=VideoPage
const newVPReplyCounts1="div#comment.comment-m-v1 div.comment div.bb-comment div.comment-header.clearfix div.tabs-order ul.clearfix:not(.e)"
const newVPReplyCounts2="div#comment.comment-m-v1 div.comment div.bb-comment div.comment-header.clearfix div.tabs-order ul.clearfix.e"
//旧版视频页总楼层数
const oldVPReplyCounts1=".comment-m .common .b-head:not(.e)"
const oldVPReplyCounts2=".comment-m .common .b-head.e"
//创意工坊live2d页面总楼层数，WLP=workshopLive2dPage
const WLPReplyCounts1="div.live2d div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix:not(.e)"
const WLPReplyCounts2="div.live2d div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix.e"
//创意工坊插画页面总楼层数，WIP=workshopIllustPage
const WIPReplyCounts1="div.illust div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix:not(.e)"
const WIPReplyCounts2="div.illust div.container div.left div.comment-area div.bb-comment div.comment-header div.tabs-order ul.clearfix.e"
var oldVPObserverOpening=false //旧版视频页观察器是否打开
var newVPObserverOpening=false //新版视频页观察器是否打开
var WLPObserverOpening=false //创意工坊live2d页面观察器是否打开
var WIPObserverOpening=false //创意工坊插画页面观察器是否打开
var okokok=false
setInterval(() => {
var whichPage="0" //0=旧版视频页，1=新版视频页，2=创意工坊live2d页面，3=创意工坊插画页面
if (document.querySelector(newVideoPage)){
whichPage="1"
}
if (document.querySelector(workshopLive2dPage)){
whichPage="2"
}
if (document.querySelector(workshopIllustPage)){
whichPage="3"
}
if (whichPage=="0"){
const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素
const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复
const separateReply2=".list-item.reply-wrap.c"
const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼
const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)"
const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点
//e代表视频总楼层数已准备完成
//f代表出现切换 按xx排序 的操作，但还没刷新楼层数
//g代表总楼层数的li，特殊标识，方便操作
//===在视频页面显示总楼层数===
if (document.querySelector(oldVPReplyCounts1)){
const owo1=document.querySelector(oldVPReplyCounts1)
owo1.classList.add("e")
const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在
owo1.classList.remove("f")
const xhr1=new XMLHttpRequest() //获取最新评论
xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=1&oid=${window.aid}&mode=2`)
xhr1.responseType="json"
xhr1.withCredentials=true
xhr1.send()
xhr1.onload=()=>{
const owowowo1=xhr1.response.data.replies[0].rpid
const xhr2=new XMLHttpRequest() //获取最新评论的楼层
xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`)
xhr2.responseType="json"
xhr2.withCredentials=true
xhr2.send()
xhr2.onload=()=>{
const owowowo2=xhr2.response.data.floor
if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的
const owowo1change=owo1.querySelector(".g")
owowo1change.innerHTML=`${owowowo2}`
}
else{
const owowo1=document.createElement("span")
const owowo2=document.createElement("span")
owowo1.innerHTML=`${owowowo2}`
owowo2.innerHTML="楼"
owowo1.setAttribute("style","margin-left: 17px;margin-right: 3px;font-size: 80%;color:#424242")
owowo2.setAttribute("style","font-size: 90%;color:#424242")
owowo1.classList.add("g")
owo1.appendChild(owowo1)
owo1.appendChild(owowo2)
}
}
}
}
//===end===
//===设置 回复 按钮样式===
if(document.querySelector(replyBtn)){
for(const i1 of document.querySelectorAll(replyBtn)){
i1.setAttribute("style","height:16px !important;padding-top:2px !important;padding-bottom:2px !important")
i1.classList.add("b")
}
}
//===end===
//===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层===
if (document.querySelector(separateReply1)) {
//显示 显示楼中楼 按钮，以及对应功能
for (const i2 of document.querySelectorAll(separateReply1)){
if (i2.querySelector(replyOperation)){
const i2_1=i2.querySelector(replyOperation)
const li=document.createElement("li");
li.setAttribute("class","fif") //fif=floor-in-floor
li.addEventListener("click",(()=>{ //点击事件
i2.classList.add("c")
}))
li.innerHTML="楼中楼楼层"
i2_1.appendChild(li)
i2_1.classList.add("b")
}
}
//显示楼层
for (const i3 of document.querySelectorAll(separateReply1)) {
i3.classList.add("a");
const qwq = i3.querySelector(".info");
const xhr = new XMLHttpRequest();
//xhr.open("get", `//api.bilibili.com/x/v2/reply/detail?type=12&oid=1&root=${i.attributes["data-id"].value}`); //另一个api接口，可用
xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`);
xhr.responseType = "json";
xhr.withCredentials = true;
xhr.send();
xhr.onload = () => {
const data = xhr.response.data.floor
const qwqwq = document.createElement("span");
qwqwq.setAttribute("style","height:16px;margin-right:14px");
qwqwq.innerHTML = `#${data}`;
qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位
}
}
}
//===end===
//===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层===
if (document.querySelector(floorInFloor1)){
for (const i4 of document.querySelectorAll(separateReply2)){
const i4_2=i4.querySelectorAll(floorInFloor2)
for (const i4_2_1 of i4_2){
const i4_2_1_1=i4_2_1.querySelector(".info")
i4_2_1.classList.add("d")
const xhr=new XMLHttpRequest()
xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`)
xhr.responseType="json"
xhr.withCredentials=true
xhr.send()
xhr.onload=()=>{
const data=xhr.response.data.floor
const span=document.createElement("span")
span.setAttribute("style","height:16px;margin-right:14px")
span.innerHTML=`#${data}`
i4_2_1_1.appendChild(span)
i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3])
}
}
}
}
//===end===
//===侦测 按热度排序 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新===
if (document.querySelector(".tabs-order .clearfix .hot-sort") && oldVPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer
const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort")
const observerConfig={attributes: true,childList: true,subtree: true,classList:true}
const observerCallback=()=>{
if (document.querySelector(oldVPReplyCounts2)){
var RCChangeClass=document.querySelector(oldVPReplyCounts2) //RCChangeClass=replyCountsChangeClass
RCChangeClass.classList.remove("e")
RCChangeClass.classList.add("f")
}
}
const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数
observer.observe(observerTarget,observerConfig) //以这两个配置开始观察
oldVPObserverOpening=true
}
//===end===
}
//#
//=
//#
//=
//#
if (whichPage=="1"){
const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素
const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复
const separateReply2=".list-item.reply-wrap.c"
const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼
const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)"
const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点
//e代表视频总楼层数已准备完成
//f代表出现切换 按xx排序 的操作，但还没刷新楼层数
//g代表总楼层数的li，特殊标识，方便操作
//===在视频页面显示总楼层数===
if (document.querySelector(newVPReplyCounts1)){
const owo1=document.querySelector(newVPReplyCounts1)
owo1.classList.add("e")
const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在
owo1.classList.remove("f")
const xhr1=new XMLHttpRequest() //获取最新评论
xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=1&oid=${window.aid}&mode=2`)
xhr1.responseType="json"
xhr1.withCredentials=true
xhr1.send()
xhr1.onload=()=>{
const owowowo1=xhr1.response.data.replies[0].rpid
const xhr2=new XMLHttpRequest() //获取最新评论的楼层
xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`)
xhr2.responseType="json"
xhr2.withCredentials=true
xhr2.send()
xhr2.onload=()=>{
const owowowo2=xhr2.response.data.floor
if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的
const owowo1change=owo1.querySelector(".g")
owowo1change.innerHTML=`${owowowo2}`
}
else{
var style1=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .default-sort:not(owo)")) //读取最终样式，包括内联样式、嵌入样式和外部样式
var style2=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .total-reply:not(owo)"))
const owowo1=document.createElement("li")
const owowo2=document.createElement("li")
owowo1.innerHTML="楼层"
owowo2.innerHTML=`${owowowo2}`
owowo2.setAttribute("style",`height:${style2.height}; margin-right:${style2.marginRight}; line-height:${style2.lineHeight}; font-size:${style2.fontSize}; color:${style2.color}`)
owowo1.classList.add("default-sort") //为设置网站自带css
owowo2.classList.add("default-sort") //设置成这个class是因为设置成其他的都会出问题，并非为了设置网站自带css
owowo1.classList.add("owo")
owowo2.classList.add("owo")
owowo2.classList.add("g")
owo1.insertBefore(owowo1,owo1.childNodes[2]) //向列表中指定位置插入一个项目
owo1.insertBefore(owowo2,owo1.childNodes[3])
document.querySelector("li.total-reply:not(.owo)").setAttribute("style","margin-right: 20px")
}
}
}
}
//===end===
//===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层===
if (document.querySelector(separateReply1)) {
//显示 显示楼中楼 按钮，以及对应功能
for (const i2 of document.querySelectorAll(separateReply1)){
if (i2.querySelector(replyOperation)){
const i2_1=i2.querySelector(replyOperation)
const li=document.createElement("li");
li.setAttribute("class","fif") //fif=floor-in-floor
li.addEventListener("click",(()=>{ //点击事件
i2.classList.add("c")
}))
li.innerHTML="楼中楼楼层"
i2_1.appendChild(li)
i2_1.classList.add("b")
}
}
//显示楼层
const spanHeight=window.getComputedStyle(document.querySelector("div.con div.info span.like span")).lineHeight //在没有文本的时候height会为0，所以用line-height
for (const i3 of document.querySelectorAll(separateReply1)) {
i3.classList.add("a");
const qwq = i3.querySelector(".info");
const xhr = new XMLHttpRequest();
xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`);
xhr.responseType = "json";
xhr.withCredentials = true;
xhr.send();
xhr.onload = () => {
const data = xhr.response.data.floor
const qwqwq = document.createElement("span");
qwqwq.setAttribute("style",`height:${spanHeight}; margin-right:16px;`);
qwqwq.innerHTML = `#${data}`;
qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位
}
}
}
//===end===
//===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层===
if (document.querySelector(floorInFloor1)){
const FIFSpanHeight=window.getComputedStyle(document.querySelector("div.reply-box div.reply-item.reply-wrap div.info span.like span")).lineHeight
for (const i4 of document.querySelectorAll(separateReply2)){
const i4_2=i4.querySelectorAll(floorInFloor2)
for (const i4_2_1 of i4_2){
const i4_2_1_1=i4_2_1.querySelector(".info")
i4_2_1.classList.add("d")
const xhr=new XMLHttpRequest()
xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`)
xhr.responseType="json"
xhr.withCredentials=true
xhr.send()
xhr.onload=()=>{
const data=xhr.response.data.floor
const span=document.createElement("span")
span.setAttribute("style",`height:${FIFSpanHeight}; margin-right:16px;`)
span.innerHTML=`#${data}`
i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3])
}
}
}
}
//===end===
//===侦测 最热 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新===
if (document.querySelector(".tabs-order .clearfix .hot-sort") && newVPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer
const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort")
const observerConfig={attributes: true,childList: true,subtree: true,classList:true}
const observerCallback=()=>{
if (document.querySelector(newVPReplyCounts2)){
var RCChangeClass=document.querySelector(newVPReplyCounts2) //RCChangeClass=replyCountsChangeClass
RCChangeClass.classList.remove("e")
RCChangeClass.classList.add("f")
}
}
const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数
observer.observe(observerTarget,observerConfig) //以这两个配置开始观察
newVPObserverOpening=true
}
//===end===
}
//#
//=
//#
//=
//#
if (whichPage=="2"){
const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素
const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复
const separateReply2=".list-item.reply-wrap.c"
const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼
const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)"
const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点
//e代表视频总楼层数已准备完成
//f代表出现切换 按xx排序 的操作，但还没刷新楼层数
//g代表总楼层数的li，特殊标识，方便操作
//===在页面显示总楼层数===
if (document.querySelector(WLPReplyCounts1)){
const owo1=document.querySelector(WLPReplyCounts1)
owo1.classList.add("e")
const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在
owo1.classList.remove("f")
const xhr1=new XMLHttpRequest() //获取最新评论
xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=42&oid=${window.location.pathname.split("/")[2]}&mode=2`) //获取url的文件名，以/为界分割，用最后一个，即oid
xhr1.responseType="json"
xhr1.withCredentials=true
xhr1.send()
xhr1.onload=()=>{
const owowowo1=xhr1.response.data.replies[0].rpid
const xhr2=new XMLHttpRequest() //获取最新评论的楼层
xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`)
xhr2.responseType="json"
xhr2.withCredentials=true
xhr2.send()
xhr2.onload=()=>{
const owowowo2=xhr2.response.data.floor
if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的
const owowo1change=owo1.querySelector(".g")
owowo1change.innerHTML=`${owowowo2}`
}
else{
var style1=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .default-sort:not(owo)")) //读取最终样式，包括内联样式、嵌入样式和外部样式
var style2=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .total-reply:not(owo)"))
const owowo1=document.createElement("li")
const owowo2=document.createElement("li")
owowo1.innerHTML="楼层"
owowo2.innerHTML=`${owowowo2}`
owowo2.setAttribute("style",`height:${style2.height};margin-right:${style2.marginRight};line-height:${style2.lineHeight};font-size:${style2.fontSize};color:${style2.color}`)
owowo1.classList.add("default-sort") //为设置网站自带css
owowo2.classList.add("default-sort") //设置成这个class是因为设置成其他的都会出问题，并非为了设置网站自带css
owowo1.classList.add("owo")
owowo2.classList.add("owo")
owowo2.classList.add("g")
owo1.insertBefore(owowo1,owo1.childNodes[2]) //向列表中指定位置插入一个项目
owo1.insertBefore(owowo2,owo1.childNodes[3])
document.querySelector("li.total-reply:not(.owo)").setAttribute("style","margin-right: 20px")
}
}
}
}
//===end===
//===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层===
if (document.querySelector(separateReply1)) {
//显示 显示楼中楼 按钮，以及对应功能
for (const i2 of document.querySelectorAll(separateReply1)){
if (i2.querySelector(replyOperation)){
const i2_1=i2.querySelector(replyOperation)
const li=document.createElement("li");
li.setAttribute("class","fif") //fif=floor-in-floor
li.addEventListener("click",(()=>{ //点击事件
i2.classList.add("c")
}))
li.innerHTML="楼中楼楼层"
i2_1.appendChild(li)
i2_1.classList.add("b")
}
}
//显示楼层
const spanHeight=window.getComputedStyle(document.querySelector("div.con div.info span.like span")).lineHeight //在没有文本的时候height会为0，所以用line-height
for (const i3 of document.querySelectorAll(separateReply1)) {
i3.classList.add("a");
const qwq = i3.querySelector(".info");
const xhr = new XMLHttpRequest();
xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`);
xhr.responseType = "json";
xhr.withCredentials = true;
xhr.send();
xhr.onload = () => {
const data = xhr.response.data.floor
const qwqwq = document.createElement("span");
qwqwq.setAttribute("style",`height:${spanHeight};margin-right:14px`);
qwqwq.innerHTML = `#${data}`;
qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位
}
}
}
//===end===
//===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层===
if (document.querySelector(floorInFloor1)){
const FIFSpanHeight=window.getComputedStyle(document.querySelector("div.reply-box div.reply-item.reply-wrap div.info span.like span")).lineHeight
for (const i4 of document.querySelectorAll(separateReply2)){
const i4_2=i4.querySelectorAll(floorInFloor2)
for (const i4_2_1 of i4_2){
const i4_2_1_1=i4_2_1.querySelector(".info")
i4_2_1.classList.add("d")
const xhr=new XMLHttpRequest()
xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`)
xhr.responseType="json"
xhr.withCredentials=true
xhr.send()
xhr.onload=()=>{
const data=xhr.response.data.floor
const span=document.createElement("span")
span.setAttribute("style",`height:${FIFSpanHeight};margin-right:14px`)
span.innerHTML=`#${data}`
i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3])
}
}
}
}
//===end===
//===侦测 最热 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新===
if (document.querySelector(".tabs-order .clearfix .hot-sort") && WLPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer
const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort")
const observerConfig={attributes: true,childList: true,subtree: true,classList:true}
const observerCallback=()=>{
if (document.querySelector(WLPReplyCounts2)){
var RCChangeClass=document.querySelector(WLPReplyCounts2) //RCChangeClass=replyCountsChangeClass
RCChangeClass.classList.remove("e")
RCChangeClass.classList.add("f")
}
}
const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数
observer.observe(observerTarget,observerConfig) //以这两个配置开始观察
WLPObserverOpening=true
}
//===end===
}
//#
//=
//#
//=
//#
if (whichPage=="3"){
const replyBtn=".reply.btn-hover:not(.b)" //排除已被 b class包含的元素
const separateReply1=".list-item.reply-wrap:not(.a)" //寻找相应属性的div 有独立楼层非楼中楼的回复
const separateReply2=".list-item.reply-wrap.c"
const floorInFloor1=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap" //楼中楼
const floorInFloor2=".list-item.reply-wrap.c .con .reply-box .reply-item.reply-wrap:not(.d)"
const replyOperation=".operation.more-operation .opera-list ul:not(.b)" //评论旁边的三个点
//e代表视频总楼层数已准备完成
//f代表出现切换 按xx排序 的操作，但还没刷新楼层数
//g代表总楼层数的li，特殊标识，方便操作
//===在页面显示总楼层数===
if (document.querySelector(WIPReplyCounts1)){
const owo1=document.querySelector(WIPReplyCounts1)
owo1.classList.add("e")
const contains=owo1.classList.contains("f") //返回布尔值，判断指定的类名是否存在
owo1.classList.remove("f")
const xhr1=new XMLHttpRequest() //获取最新评论
xhr1.open("get",`//api.bilibili.com/x/v2/reply/main?type=42&oid=${window.location.pathname.split("/")[2]}&mode=2`) //获取url的文件名，以/为界分割，用最后一个，即oid
xhr1.responseType="json"
xhr1.withCredentials=true
xhr1.send()
xhr1.onload=()=>{
const owowowo1=xhr1.response.data.replies[0].rpid
const xhr2=new XMLHttpRequest() //获取最新评论的楼层
xhr2.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${owowowo1}`)
xhr2.responseType="json"
xhr2.withCredentials=true
xhr2.send()
xhr2.onload=()=>{
const owowowo2=xhr2.response.data.floor
if (contains==true){ //如果总楼层数已显示，则改为替换数字，否则创建新的
const owowo1change=owo1.querySelector(".g")
owowo1change.innerHTML=`${owowowo2}`
}
else{
var style1=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .default-sort:not(owo)")) //读取最终样式，包括内联样式、嵌入样式和外部样式
var style2=window.getComputedStyle(document.querySelector(".tabs-order .clearfix .total-reply:not(owo)"))
const owowo1=document.createElement("li")
const owowo2=document.createElement("li")
owowo1.innerHTML="楼层"
owowo2.innerHTML=`${owowowo2}`
owowo2.setAttribute("style",`height:${style2.height};margin-right:${style2.marginRight};line-height:${style2.lineHeight};font-size:${style2.fontSize};color:${style2.color}`)
owowo1.classList.add("default-sort") //为设置网站自带css
owowo2.classList.add("default-sort") //设置成这个class是因为设置成其他的都会出问题，并非为了设置网站自带css
owowo1.classList.add("owo")
owowo2.classList.add("owo")
owowo2.classList.add("g")
owo1.insertBefore(owowo1,owo1.childNodes[2]) //向列表中指定位置插入一个项目
owo1.insertBefore(owowo2,owo1.childNodes[3])
document.querySelector("li.total-reply:not(.owo)").setAttribute("style","margin-right: 20px")
}
}
}
}
//===end===
//===显示 显示楼中楼 按钮 && 显示独立非楼中楼评论楼层===
if (document.querySelector(separateReply1)) {
//显示 显示楼中楼 按钮，以及对应功能
for (const i2 of document.querySelectorAll(separateReply1)){
if (i2.querySelector(replyOperation)){
const i2_1=i2.querySelector(replyOperation)
const li=document.createElement("li");
li.setAttribute("class","fif") //fif=floor-in-floor
li.addEventListener("click",(()=>{ //点击事件
i2.classList.add("c")
}))
li.innerHTML="楼中楼楼层"
i2_1.appendChild(li)
i2_1.classList.add("b")
}
}
//显示楼层
const spanHeight=window.getComputedStyle(document.querySelector("div.con div.info span.like span")).lineHeight //在没有文本的时候height会为0，所以用line-height
for (const i3 of document.querySelectorAll(separateReply1)) {
i3.classList.add("a");
const qwq = i3.querySelector(".info");
const xhr = new XMLHttpRequest();
xhr.open("get", `//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i3.attributes["data-id"].value}`);
xhr.responseType = "json";
xhr.withCredentials = true;
xhr.send();
xhr.onload = () => {
const data = xhr.response.data.floor
const qwqwq = document.createElement("span");
qwqwq.setAttribute("style",`height:${spanHeight};margin-right:14px`);
qwqwq.innerHTML = `#${data}`;
qwq.insertBefore(qwqwq,qwq.childNodes[3]) //加在div info里的第三位
}
}
}
//===end===
//===赋予 楼中楼楼层 按钮功能，即显示楼中楼楼层===
if (document.querySelector(floorInFloor1)){
const FIFSpanHeight=window.getComputedStyle(document.querySelector("div.reply-box div.reply-item.reply-wrap div.info span.like span")).lineHeight
for (const i4 of document.querySelectorAll(separateReply2)){
const i4_2=i4.querySelectorAll(floorInFloor2)
for (const i4_2_1 of i4_2){
const i4_2_1_1=i4_2_1.querySelector(".info")
i4_2_1.classList.add("d")
const xhr=new XMLHttpRequest()
xhr.open("get",`//api.bilibili.com/x/v2/reply/info?type=12&oid=1&rpid=${i4_2_1.attributes["data-id"].value}`)
xhr.responseType="json"
xhr.withCredentials=true
xhr.send()
xhr.onload=()=>{
const data=xhr.response.data.floor
const span=document.createElement("span")
span.setAttribute("style",`height:${FIFSpanHeight};margin-right:14px`)
span.innerHTML=`#${data}`
i4_2_1_1.insertBefore(span,i4_2_1_1.childNodes[3])
}
}
}
}
//===end===
//===侦测 最热 li，出现变动就改变replyCounts的class，做到和评论总数同步的刷新===
if (document.querySelector(".tabs-order .clearfix .hot-sort") && WIPObserverOpening==false){ //observer仅需开启一次，过多的开启会拖累性能，脚本的每次循环不会重置observer
const observerTarget=document.querySelector(".tabs-order .clearfix .hot-sort")
const observerConfig={attributes: true,childList: true,subtree: true,classList:true}
const observerCallback=()=>{
if (document.querySelector(WIPReplyCounts2)){
var RCChangeClass=document.querySelector(WIPReplyCounts2) //RCChangeClass=replyCountsChangeClass
RCChangeClass.classList.remove("e")
RCChangeClass.classList.add("f")
}
}
const observer=new MutationObserver(observerCallback) //创建一个观察器并传入回调参数
observer.observe(observerTarget,observerConfig) //以这两个配置开始观察
WIPObserverOpening=true
}
//===end===
}
}, 1000);
})();
