${info}
` ); return; } // load reply count const totalReplyCount = parseInt(firstPaginationData?.cursor?.all_count) || 0; DOMUtils.text(this.$el.totalReply!, totalReplyCount); // check whether replies are selected // ref: BV1Dy2mY3EGy if (firstPaginationData?.cursor?.name?.includes("精选")) { DOMUtils.html( this.$el.navSort!, /*html*/ `精选评论
`
);
}
// load the top reply if it exists
if (firstPaginationData.top_replies && firstPaginationData.top_replies.length !== 0) {
const topReplyData = firstPaginationData.top_replies[0];
this.appendReplyItem(topReplyData, true);
}
// load normal replies
for (const replyData of firstPaginationData.replies) {
this.appendReplyItem(replyData);
}
// script ends here if there are no more replies
if (firstPaginationData.replies.length === 0 || firstPaginationData.cursor.is_end) {
const infoElement = DOMUtils.createElement(
"p",
{
className: "no-more-replies-info",
textContent: "没有更多评论",
},
{
style: "padding-bottom: 100px; text-align: center; color: #999;",
}
);
DOMUtils.append(this.$el.replyWrapper!, infoElement);
return;
}
// add page loader
this.addAnchor();
},
async getPaginationData(plat: number) {
const params = {
pagination_str: JSON.stringify({
offset: this.$data.nextOffset || "",
}),
oid: this.$data.oid,
type: this.$data.commentType,
wts: parseInt((Date.now() / 1000).toString()),
// plat: 1,
// web_location: 1315875,
};
if (this.$data.currentSortType === sortTypeConstant.HOT) {
Reflect.set(params, "mode", 3);
if (!this.$data.nextOffset) {
// params.seek_rpid = "";
}
} else if (this.$data.currentSortType === sortTypeConstant.LATEST) {
Reflect.set(params, "mode", 2);
}
const isLogin = await BilibiliGlobalData.$data.isLogin;
// 已登录就用跨域请求且不带Cookie
// 未登录就用fetch请求
const fetchResult = await httpx.get(
`https://${BilibiliApiConfig.web_host}/x/v2/reply/wbi/main?${await wbi(params)}`,
{
fetch: !isLogin,
fetchInit: {
credentials: "same-origin",
},
anonymous: !isLogin,
}
);
const fetchResultJSON = utils.toJSON(fetchResult.data.responseText);
this.$data.nextOffset = fetchResultJSON.data.cursor?.pagination_reply?.next_offset || "";
return fetchResultJSON;
},
/**
* 添加评论项
*/
appendReplyItem(replyData: any, isTopReply?: boolean) {
if (
typeof this.$data.replyPool === "object" &&
this.$data.replyPool != null &&
// @ts-expect-error
this.$data.replyPool[replyData.rpid]
) {
// 评论重复了
return;
}
const $replyItem = DOMUtils.createElement("div", {
className: "reply-item",
innerHTML: /*html*/ `
${
replyData.content.pictures
? `
`
: ""
}
${this.getImageItems(replyData.content.pictures)}
共${pageAmount}页
${currentPageNumber !== 1 ? '上一页' : ""}
${(() => {
// 4 on the left, 4 on the right, then merge
const left = [
currentPageNumber - 4,
currentPageNumber - 3,
currentPageNumber - 2,
currentPageNumber - 1,
].filter((num) => num >= 1);
const right = [
currentPageNumber + 1,
currentPageNumber + 2,
currentPageNumber + 3,
currentPageNumber + 4,
].filter((num) => num <= pageAmount);
const merge = ([]).concat(left, currentPageNumber, right);
// chosen 5(if able)
let chosen;
if (currentPageNumber <= 3) chosen = merge.slice(0, 5);
else if (currentPageNumber >= pageAmount - 3) chosen = merge.reverse().slice(0, 5).reverse();
else chosen = merge.slice(merge.indexOf(currentPageNumber) - 2, merge.indexOf(currentPageNumber) + 3);
// add first and dots
let final = JSON.parse(JSON.stringify(chosen));
if (!final.includes(1)) {
let front = [1];
// @ts-expect-error
if (final.at(0) !== 2) front = [1, "..."];
// @ts-expect-error
final = [].concat(front, final);
}
// add last and dots
if (!final.includes(pageAmount)) {
let back = [pageAmount];
// @ts-expect-error
if (final.at(-1) !== pageAmount - 1) back = ["...", pageAmount];
// @ts-expect-error
final = [].concat(final, back);
}
// assemble to html
return final.reduce((acc: string, cur: number | string) => {
if (cur === "...") return acc + '...';
if (cur === currentPageNumber)
return acc + /*html*/ `${cur}`;
return acc + /*html*/ `${cur}`;
}, "");
})()}
${currentPageNumber !== pageAmount ? /*html*/ `` : ""}
`,
});
// add click event listener
const pageSwitcherPrevBtn = pageSwitcher.querySelector(".pagination-to-prev-btn");
DOMUtils.on(pageSwitcherPrevBtn, "click", () => {
this.loadPaginatedSubReplies(rootReplyID, subReplyList, subReplyAmount, currentPageNumber - 1);
});
const pageSwitcherNextBtn = pageSwitcher.querySelector(".pagination-to-next-btn");
DOMUtils.on(pageSwitcherNextBtn, "click", () => {
this.loadPaginatedSubReplies(rootReplyID, subReplyList, subReplyAmount, currentPageNumber + 1);
});
pageSwitcher.querySelectorAll(".pagination-page-number:not(.current-page)")?.forEach(($pageNumber) => {
const number = parseInt($pageNumber.textContent);
DOMUtils.on($pageNumber, "click", () =>
this.loadPaginatedSubReplies(rootReplyID, subReplyList, subReplyAmount, number)
);
});
// append page switcher
subReplyList.appendChild(pageSwitcher);
},
addAnchor() {
const anchorElement = DOMUtils.createElement(
"div",
{
className: "anchor-for-loading",
textContent: "正在加载...",
},
{
style: `text-align: center; color: #61666d; transform: translateY(-50px)`,
}
);
DOMUtils.append(this.$el.replyWrapper!, anchorElement);
let paginationCounter = 1;
const ob = new IntersectionObserver(async (entries) => {
if (!entries[0].isIntersecting) return;
const { data: newPaginationData } = await this.getPaginationData(++paginationCounter);
if (!newPaginationData.replies || newPaginationData.replies.length === 0) {
anchorElement.textContent = "所有评论已加载完毕";
ob.disconnect();
return;
}
for (const replyData of newPaginationData.replies) {
this.appendReplyItem(replyData);
}
});
ob.observe(anchorElement);
},
};