章节讨论中置顶显示自己的吐槽，高亮回复过的章节格子
// ==UserScript==
// @name 章节讨论吐槽加强
// @namespace https://bgm.tv/group/topic/408098
// @version 0.5.5
// @description 章节讨论中置顶显示自己的吐槽，高亮回复过的章节格子
// @author oo
// @icon https://bgm.tv/img/favicon.ico
// @match http*://bgm.tv/*
// @match http*://chii.in/*
// @match http*://bangumi.tv/*
// @grant GM_xmlhttpRequest
// @require https://update.greasyfork.org/scripts/549003/1658079/Bangumi-BBCode-to-HTML.js
// @license MIT
// @gf https://greasyfork.org/zh-CN/scripts/516402
// @gadget https://bgm.tv/dev/app/3341
// ==/UserScript==
/* global bbcodeToHtml */
(async function () {
const colors = {
watched: localStorage.getItem('incheijs_ep_watched') || '#825AFA',
air: localStorage.getItem('incheijs_ep_air') || '#87CEFA'
}
const myUsername = document.querySelector('#dock a').href.split('/').pop();
const style = document.createElement('style');
const refreshStyle = () => {
style.textContent = /* css */`
a.load-epinfo.epBtnWatched,
.prg_list.load-all a.epBtnAir,
.prg_list.load-all a.epBtnQueue {
opacity: .6;
}
.commented a.load-epinfo.epBtnWatched {
opacity: 1;
background: ${colors.watched};
}
.uncommented a.load-epinfo.epBtnWatched,
.prg_list.load-all .commented a.epBtnAir,
.prg_list.load-all .commented a.epBtnQueue,
.prg_list.load-all .uncommented a.epBtnAir,
.prg_list.load-all .uncommented a.epBtnQueue {
opacity: 1;
}
.commented a.load-epinfo.epBtnAir {
background: ${colors.air};
}
.commented a.epBtnQueue {
background: linear-gradient(#FFADD1 80%, ${colors.watched} 80%);
}
html[data-theme="dark"] .commented a.load-epinfo.epBtnWatched {
background: ${colors.watched};
}
html[data-theme="dark"] .commented a.epBtnAir {
background: rgb(from ${colors.air} r g b / 90%);
}
html[data-theme="dark"] .commented a.epBtnQueue {
background: linear-gradient(#FFADD1 80%, ${colors.watched} 80%);
}
.cloned_mine{
display: block !important;
background: transparent;
}
div.row_reply.light_even.cloned_mine {
background: transparent;
}
.cloned_mine .inner {
margin: 0 0 0 50px;
}
.colorPickers input {
border: 0;
padding: 0;
width: 1em;
height: 1em;
border-radius: 2px;
}
.colorPickers input::-webkit-color-swatch-wrapper {
padding: 0;
}
.colorPickers input::-webkit-color-swatch {
border: 0;
}
.subject_my_comments_section {
margin: 5px 0;
padding: 10px;
font-size: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #FAFAFA;
}
html[data-theme="dark"] .subject_my_comments_section {
background: #353535;
}
.subject_my_comments_section .inner {
font-size: 14px;
color: #444;
}
html[data-theme="dark"] .subject_my_comments_section .inner {
color: #e1e1e1;
}
.subject_my_comments_section .inner.loading {
opacity: .3;
pointer-events: none;
}
/* 折叠回复 */
div.sub_reply_collapse {
padding: 2px 0 2px 0;
-moz-opacity: 0.8;
opacity: 0.8;
}
div.sub_reply_collapse .post_actions {
margin-top: 0;
}
div.sub_reply_collapse a.avatar {
display: none;
}
div.sub_reply_collapse div.inner {
margin-left: 5px;
}
div.sub_reply_collapse div.inner div.cmt_sub_content {
display: inline;
margin: 0;
color: #555;
}
.tip_collapsed {
font-size: 12px;
color: #666;
}
html[data-theme="dark"] .tip_collapsed {
color: #d8d8d8;
}
`;
};
refreshStyle();
document.head.appendChild(style);
async function getEpComments(episodeId) {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'GET',
url: `https://next.bgm.tv/p1/episodes/${episodeId}/comments`,
onload: function (response) {
if (response.status >= 200 && response.status < 300) {
resolve(JSON.parse(response.responseText));
} else {
reject(new Error(`请求失败，状态码: ${response.status}`));
}
},
onerror: function (error) {
reject(new Error(`请求出错: ${error}`));
}
});
});
}
const cacheHandler = {
// 初始化时检查并清理过期项目
init(target) {
const data = JSON.parse(localStorage.getItem(target.storageKey) || '{}');
const now = Date.now();
for (const key in data) {
if (data[key].expiry < now) {
delete data[key];
}
}
localStorage.setItem(target.storageKey, JSON.stringify(data));
},
get(target, key) {
const data = JSON.parse(localStorage.getItem(target.storageKey) || '{}');
const now = Date.now();
const oneMonth = 30 * 24 * 60 * 60 * 1000;
if (data[key] && now < data[key].expiry) {
// 调用时延后一个月过期时间
data[key].expiry = now + oneMonth;
localStorage.setItem(target.storageKey, JSON.stringify(data));
return data[key].value;
} else {
delete data[key];
localStorage.setItem(target.storageKey, JSON.stringify(data));
return undefined;
}
},
set(target, key, value) {
const now = Date.now();
const oneMonth = 30 * 24 * 60 * 60 * 1000;
const expiry = now + oneMonth;
const data = JSON.parse(localStorage.getItem(target.storageKey) || '{}');
data[key] = { value, expiry };
localStorage.setItem(target.storageKey, JSON.stringify(data));
return true;
}
};
const cacheTarget = { storageKey: 'incheijs_ep_cache' };
cacheHandler.init(cacheTarget);
const cache = new Proxy(cacheTarget, cacheHandler);
const saveRepliesHTML = (getHTML) => (epName, epId, replies) => {
sessionStorage.setItem(`incheijs_ep_content_${epId}`, replies.reduce((acc, reply) => {
return acc += `<a class="l" href="/ep/${epId}#${reply.id}">📌</a> ${getHTML(reply)}<div class="clear section_line"></div>`;
}, `<h2 class="subtitle">${epName}</h2>`));
};
const saveRepliesHTMLFromDOM = saveRepliesHTML((reply) => reply.querySelector('.message').innerHTML.trim());
const saveRepliesHTMLFromJSON = saveRepliesHTML((reply) => bbcodeToHtml(reply.content));
// 章节讨论页
if (location.pathname.startsWith('/ep')) {
let replies = getRepliesFromDOM(document);
const id = location.pathname.split('/')[2];
if (replies.length) {
document.getElementById('reply_wrapper').before(...replies.map(elem => {
const clone = elem.cloneNode(true);
clone.id += '_clone';
clone.classList.add('cloned_mine');
// 初始化贴贴
/* eslint-disable */
$(clone).find('div.likes_grid').tooltip({
animation: true,
offset: 0,
selector: 'a.item',
html: true,
delay: {
show: "300",
"hide": 5000
}
});
$(clone).find('div.likes_grid a.item').on('show.bs.tooltip', function (e) {
$(".tooltip[aria-describedby!='" + $(this).attr('aria-describedby') + "']").each(function () {
$(this).tooltip('hide');
});
$(this).bind('click', function () { // updateAllGrids 不含克隆，在此绑定
chiiLib.likes.req(this);
return false;
})
})
$(clone).find('.likes_grid').on('mouseleave', function () {
$(".tooltip").each(function () {
$(this).tooltip('hide');
});
});
$(clone).find('a.like_dropdown').bind('mouseenter', function () {
var $item = $(this),
$container = $item.closest('.dropdown'),
$type = $item.attr('data-like-type'),
$main_id = $item.attr('data-like-main-id'),
$related_id = $item.attr('data-like-related-id'),
$tpl_id = $item.attr('data-like-tpl-id');
if (!$container.find('ul').length) {
var $tpl = $('#' + $tpl_id).html();
$container.append($tpl.formatUnicorn({
type: $type,
main_id: $main_id,
related_id: $related_id,
}));
$container.find('ul a').bind('click', function () {
chiiLib.likes.req(this);
return false;
});
}
});
/* eslint-enable */
clone.querySelectorAll('[id]').forEach(e => e.id += '_clone'); // 楼中楼回复
clone.querySelectorAll('.erase_post').forEach(e => { // 添加原删除事件
/* eslint-disable */
$(e).click(function () {
if (confirm(AJAXtip['eraseReplyConfirm'])) {
var post_id = $(this).attr('id').split('_')[1];
chiiLib.ukagaka.presentSpeech(AJAXtip['wait'] + AJAXtip['eraseingReply']);
$.ajax({
type: "GET",
url: (this) + '&ajax=1',
success: function (html) {
$('#post_' + post_id).fadeOut(500);
chiiLib.ukagaka.presentSpeech(AJAXtip['eraseReply'], true);
},
error: function (html) {
chiiLib.ukagaka.presentSpeech(AJAXtip['error'], true);
}
});
}
return false;
});
/* eslint-enable */
});
return clone;
}));
cache[id] = true;
saveRepliesHTMLFromDOM(document.title.split(' ')[0], id, replies);
// 修改贴贴方法
/* eslint-disable */
chiiLib.likes.updateGridWithRelatedID = function (related_id, data, is_live = false) {
var $container = $('#likes_grid_' + related_id);
var $container_clone = $('#likes_grid_' + related_id + '_clone'); // edited
$container.html('');
$container_clone.html(''); // edited
if (data) {
var $tpl = $('#' + 'likes_reaction_grid_item').html();
var values = $.map(data, function (v) {
return v;
}).sort(function (a, b) {
return parseInt(b.total) - parseInt(a.total);
});
$.each(values, function (key, item) {
var filtered_users = item.users.filter(user => {
if (typeof (data_ignore_users) !== "undefined" && data_ignore_users.length) {
return !data_ignore_users.includes(user.username);
}
return true;
});
if (filtered_users.length > 0) {
const toAppend = $tpl.formatUnicorn({
type: parseInt(item.type),
main_id: parseInt(item.main_id),
related_id: related_id,
value: parseInt(item.value),
emoji: item.emoji,
num: parseInt(filtered_users.length),
selected_class: (item.selected ? (is_live ? ' live_selected selected' : ' selected') : ''),
users: chiiLib.likes.escapeHtml(filtered_users.map(user => {
return '<a href="/user/' + user.username + '">' + user.nickname + '</a>'
}).join('、'))
});
$container.append(toAppend);
$container_clone.append(toAppend); // edited
}
});
$container.find('a.item').bind('click', function () {
chiiLib.likes.req(this);
return false;
});
$container_clone.find('a.item').bind('click', function () { // edited
chiiLib.likes.req(this);
return false;
});
}
};
/* eslint-enable */
// 同步克隆和本体的回复变化
// 修改添加回复方法
/* eslint-disable */
chiiLib.ajax_reply.insertSubComments = function (list_id, json) {
if (json.posts.sub) {
var posts = json.posts.sub,
$list = $(list_id);
$.each(posts, function (post_id, sub_posts) {
if (sub_posts) {
var $post = $('#post_' + post_id),
$main_post = $post.find('div.message'),
$post_clone = $('#post_' + post_id + '_clone'), // edited
$main_post_clone = $post_clone.find('div.message'); // edited
if (!$('#topic_reply_' + post_id).length) {
$main_post.after('<div id="topic_reply_' + post_id + '" class="topic_sub_reply"></div>');
$main_post_clone.after('<div id="topic_reply_' + post_id + '_clone" class="topic_sub_reply"></div>'); // edited
}
var html = '';
$.each(sub_posts, function (key, val) {
if ($('#post_' + val.pst_id).length == 0) {
html += '<div id="post_' + val.pst_id + '" class="sub_reply_bg clearit"><div class="re_info"><small>' + val.dateline + '</small></div><a href="' + SITE_URL + '/user/' + val.username + '" class="avatar"><span class="avatarNeue avatarSize32 ll" style="background-image:url(\'' + val.avatar + '\')"></span></a><div class="inner"><strong class="userName"><a href="' + SITE_URL + '/user/' + val.username + '" class="l">' + val.nickname + '</a></strong><div class="cmt_sub_content">' + val.pst_content + '</div></div></div>';
}
});
if (html != '') {
$(html).hide().appendTo('#topic_reply_' + post_id).fadeIn();
$(html).hide().appendTo('#topic_reply_' + post_id + '_clone').fadeIn(); // edited
}
}
});
}
}
/* eslint-enable */
// 劫持删除回复请求
const originalAjax = $.ajax;
$.ajax = function (options) {
const targetUrlRegex = /\/erase\/reply\/ep\/(\d+)\?gh=[^&]+&ajax=1$/;
const requestUrl = options.url;
const requestType = (options.type || '').toUpperCase();
const isTargetRequest = requestType === "GET" && targetUrlRegex.test(requestUrl);
if (isTargetRequest) {
const matchResult = requestUrl.match(targetUrlRegex);
const post_id = matchResult ? matchResult[1] : null;
const originalSuccess = options.success;
/* eslint-disable */
options.success = function (html) {
if (post_id) { // 同步删除克隆
$('#post_' + post_id + '_clone').fadeOut(500, function () {
$(this).remove(); // 删除以避免兼容开播前隐藏设置的强制可见，且便于检查
$('#post_' + post_id).remove(); // 原代码已设置动画
// 删除后检查是否还有自己的回复
const myReplies = getRepliesFromDOM(document);
if (myReplies.length) {
cache[id] = true;
saveRepliesHTMLFromDOM(document.title.split(' ')[0], id, myReplies);
} else {
cache[id] = false;
sessionStorage.removeItem(`incheijs_ep_content_${id}`);
}
});
}
if (typeof originalSuccess === 'function') {
originalSuccess.apply(this, arguments);
}
};
/* eslint-enable */
}
return originalAjax.call(this, options);
};
} else {
cache[id] = false;
}
// 兼容开播前隐藏
// 添加回复
document.querySelector('#ReplyForm').addEventListener('submit', async () => {
const observer = new MutationObserver(() => {
const myReplies = getRepliesFromDOM(document);
if (myReplies.length) {
cache[id] = true;
saveRepliesHTMLFromDOM(document.title.split(' ')[0], id, myReplies);
observer.disconnect();
}
});
observer.observe(document.querySelector('#comment_list'), { childList: true });
});
// 侧栏其他章节，无法直接判断是否看过，只取缓存不检查
const epElems = document.querySelectorAll('.sideEpList li a');
for (const elem of epElems) {
const url = elem.href;
const id = url.split('/')[4];
if (cache[id] === true) elem.style.color = colors.watched;
}
}
function getRepliesFromDOM(dom) {
return [...dom.querySelectorAll('#comment_list .row_reply')]
.filter(comment => (
(!comment.classList.contains('reply_collapse') ||
comment.querySelector('.post_content_collapsed')) &&
comment.querySelector('.avatar')?.href.split('/').pop() === myUsername
));
}
// 动画条目页
const subjectID = location.pathname.match(/(?<=subject\/)\d+/)?.[0];
if (subjectID) {
const type = document.querySelector('.focus').href.split('/')[3];
if (['anime', 'real'].includes(type)) {
await renderWatched();
const prgList = document.querySelector('.prg_list');
const innerDefault = [...prgList.querySelectorAll('a')].map(elem => `<div id="incheijs_ep_content_${elem.id.split('_').pop()}"><div class="loader"></div></div>`).join('');
document.querySelector('.subject_tag_section').insertAdjacentHTML('afterend', /* html */`
<div class="subject_my_comments_section">
<h2 class="subtitle" style="font-size:14px">我的每集吐槽
<a style="padding-left:5px;font-size:12px" class="l" id="expandInd" href="javascript:">[展开]</a>
<a style="padding-left:5px;font-size:12px" class="l" id="checkRest" href="javascript:">[检查]</a>
<span class="colorPickers" style="float:right">
<input type="color" class="titleTip" title="看过格子高亮色" name="watched" value=${colors.watched}>
<input type="color" class="titleTip" title="非看过格子高亮色" name="air" value="${colors.air}">
</span>
</h2>
<div class="inner" hidden style="padding: 5px 10px"></div>
</div>
`);
document.querySelectorAll('.colorPickers input').forEach(picker => {
picker.addEventListener('change', () => {
const type = picker.name;
localStorage.setItem(`incheijs_ep_${type}`, picker.value);
colors[type] = picker.value;
refreshStyle();
});
$(picker).tooltip();
});
const expandInd = document.querySelector('#expandInd');
const checkRest = document.querySelector('#checkRest');
expandInd.addEventListener('click', async (e) => {
e.target.hidden = true;
const inner = document.querySelector('.subject_my_comments_section .inner');
inner.innerHTML = innerDefault;
inner.hidden = false;
inner.classList.add('loading');
await displayMine();
inner.classList.remove('loading');
if (!inner.querySelector('h2')) {
inner.innerHTML = '<div style="width: 100%;text-align:center">没有找到吐槽_(:з”∠)_</div>';
return;
}
[...inner.querySelectorAll('.section_line')].pop()?.remove();
});
checkRest.addEventListener('click', async (e) => {
expandInd.hidden = true;
e.target.remove();
prgList.classList.add('load-all');
await renderRest();
prgList.classList.remove('load-all');
expandInd.hidden = false;
});
}
}
// 首页
if (location.pathname === '/') {
renderWatched();
}
async function retryAsyncOperation(operation, maxRetries = 3, delay = 1000) {
let error;
for (let i = 0; i < maxRetries; i++) {
try {
return await operation();
} catch (e) {
error = e;
if (i < maxRetries - 1) {
await new Promise(resolve => setTimeout(resolve, delay));
}
}
}
throw error;
}
async function limitConcurrency(tasks, concurrency = 2) {
const results = [];
let index = 0;
async function runTask() {
while (index < tasks.length) {
const currentIndex = index++;
const task = tasks[currentIndex];
try {
const result = await task();
results[currentIndex] = result;
} catch (error) {
results[currentIndex] = error;
}
}
}
const runners = Array.from({ length: concurrency }, runTask);
await Promise.all(runners);
return results;
}
async function walkThroughEps({
cached = () => false,
onCached = () => { },
shouldFetch = () => true,
onSuccess = () => { },
onError = () => { }
} = {}) {
const epElems = document.querySelectorAll('.prg_list a');
const tasks = [];
for (const epElem of epElems) {
const epData = {
epElem,
epName: epElem.title.split(' ')[0],
epId: new URL(epElem.href).pathname.split('/').pop()
};
tasks.push(async () => {
if (cached(epData)) {
onCached(epData);
return;
} else if (shouldFetch(epData)) {
try {
const data = await retryAsyncOperation(() => getEpComments(epData.epId));
const comments = data.filter(comment => comment.user.username === myUsername && comment.content);
if (comments.length) saveRepliesHTMLFromJSON(epData.epName, epData.epId, comments);
onSuccess(epData, comments);
} catch (error) {
console.error(`Failed to fetch ${epElem.href}:`, error);
onError(epData);
}
}
});
}
await limitConcurrency(tasks, 5);
}
async function renderEps(shouldFetch) {
await walkThroughEps({
cached: ({ epId }) => cache[epId] !== undefined,
onCached: ({ epElem, epId }) => epElem.parentElement.classList.add(cache[epId] ? 'commented' : 'uncommented'),
shouldFetch,
onSuccess: ({ epElem, epId }, comments) => {
const hasComments = comments.length > 0;
cache[epId] = hasComments;
epElem.parentElement.classList.add(hasComments ? 'commented' : 'uncommented');
}
});
}
async function renderWatched() {
await renderEps(({ epElem }) => epElem.classList.contains('epBtnWatched'));
}
async function renderRest() {
await renderEps(({ epElem }) => !epElem.classList.contains('commented') && !epElem.classList.contains('uncommented'));
}
async function displayMine() {
await walkThroughEps({
cached: ({ epId }) => sessionStorage.getItem(`incheijs_ep_content_${epId}`),
onCached: ({ epId }) => setContainer(epId),
shouldFetch: ({ epId }) => cache[epId],
onSuccess: ({ epId }) => setContainer(epId),
onError: ({ epName, epId }) => setContainer(epId,
`${epName}加载失败<div class="clear section_line"></div>`
)
});
function setContainer(epId, content) {
const cacheKey = `incheijs_ep_content_${epId}`;
const container = document.querySelector(`#${cacheKey}`);
container.innerHTML = content || sessionStorage.getItem(cacheKey);
}
}
})();