为 Bangumi 长篇剧集提供「看到」操作拦截，和范围标记功能
// ==UserScript==
// @name 班固米长篇点格子增强
// @version 0.1
// @description 为 Bangumi 长篇剧集提供「看到」操作拦截，和范围标记功能
// @match https://bgm.tv/subject/*
// @match https://bangumi.tv/subject/*
// @match https://chii.in/subject/*
// @grant none
// @license MIT
// @namespace https://greasyfork.org/users/919437
// ==/UserScript==
(function () {
'use-strict';
// --- 配置 ---
const LONG_SERIES_THRESHOLD = 25;
const API_CALL_DELAY = 250;
const MAX_WAIT_TIME = 10000;
// --- 状态映射表 ---
const STATUS_MAP = {
'w': { text: '看过', apiKey: 'watched', cssClass: 'epBtnWatched' },
'q': { text: '想看', apiKey: 'queue', cssClass: 'epBtnQueue' }, // 经确认，class为 epBtnQueue
'd': { text: '抛弃', apiKey: 'drop', cssClass: 'epBtnDropped' } // 猜测 class 为 epBtnDropped
};
// --- 脚本状态变量 ---
let selectionState = {
isActive: false,
step: 'start', // 'start' or 'end'
};
/**
* 等待目标元素出现在页面上
* @param {string} selector - CSS选择器
* @returns {Promise<Element>}
*/
function waitForElement(selector) {
return new Promise((resolve, reject) => {
const interval = setInterval(() => {
const el = document.querySelector(selector);
if (el) {
clearInterval(interval);
resolve(el);
}
}, 100);
setTimeout(() => {
clearInterval(interval);
reject(new Error(`等待元素 "${selector}" 超时.`));
}, MAX_WAIT_TIME);
});
}
/**
* 显示自定义模态对话框
* @param {string} title - 对话框标题
* @param {string} contentHtml - 对话框内容 (HTML)
* @param {boolean} showCancel - 是否显示取消按钮
* @returns {Promise<void>} 当用户点击确认时 resolve，点击取消或关闭时 reject
*/
function showModal(title, contentHtml, showCancel = true) {
return new Promise((resolve, reject) => {
// 移除已存在的模态框
const existingModal = document.getElementById('bgm-manager-modal');
if (existingModal) existingModal.remove();
const modalOverlay = document.createElement('div');
modalOverlay.id = 'bgm-manager-modal';
modalOverlay.style.cssText = `
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6); z-index: 9999;
display: flex; align-items: center; justify-content: center;
`;
modalOverlay.innerHTML = `
<div style="background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 450px; max-width: 90%;">
<h3 style="margin: 0; padding: 15px 20px; border-bottom: 1px solid #e0e0e0; font-size: 16px; color: #333;">${title}</h3>
<div style="padding: 20px; line-height: 1.6; color: #555; max-height: 40vh; overflow-y: auto;">${contentHtml}</div>
<div style="padding: 10px 20px; border-top: 1px solid #e0e0e0; text-align: right;">
${showCancel ? '<button id="modal-cancel-btn" class="chiiBtn" style="margin-right: 10px;">取消</button>' : ''}
<button id="modal-confirm-btn" class="inputBtn">确认</button>
</div>
</div>
`;
document.body.appendChild(modalOverlay);
const confirmBtn = document.getElementById('modal-confirm-btn');
const cancelBtn = document.getElementById('modal-cancel-btn');
const closeModal = () => modalOverlay.remove();
confirmBtn.onclick = () => {
closeModal();
resolve();
};
if (cancelBtn) {
cancelBtn.onclick = () => {
closeModal();
reject(new Error('User cancelled'));
};
}
modalOverlay.onclick = (e) => {
if (e.target === modalOverlay) {
closeModal();
reject(new Error('User cancelled'));
}
};
});
}
/**
* 脚本主函数
*/
async function main() {
const subjectId = window.location.pathname.match(/\/subject\/(\d+)/)?.[1];
if (!subjectId) return;
try {
const response = await fetch(`https://api.bgm.tv/v0/subjects/${subjectId}`);
const data = await response.json();
if (data && data.eps != null && (!data.eps || data.eps > LONG_SERIES_THRESHOLD)) {
const prgManager = await waitForElement('.subject_prg');
initializeManager(prgManager);
}
} catch (error) {
console.error('BGM 范围标记脚本出错:', error);
}
}
/**
* 初始化管理器
* @param {HTMLElement} prgManager - 进度管理区块元素
*/
function initializeManager(prgManager) {
const panel = createManagerPanel();
prgManager.appendChild(panel);
const toggleBtn = document.createElement('a');
toggleBtn.href = 'javascript:void(0);';
toggleBtn.className = 'l';
toggleBtn.textContent = '长篇管理';
toggleBtn.style.marginLeft = '10px';
toggleBtn.onclick = () => {
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
};
prgManager.querySelector('a.l').insertAdjacentElement('afterend', toggleBtn);
// Hook "看到(WatchedTill)" 操作
if (window.chiiLib?.home?.epStatusClick) {
const origEpStatusClick = window.chiiLib.home.epStatusClick;
window.chiiLib.home.epStatusClick = async function (targetElement) {
const statusType = $(targetElement).attr('id').split('_')[0];
if (statusType === 'WatchedTill') {
try {
const epNum = $(targetElement).closest('.prg_popup').parent().find('.epBtnAir, .epBtnQueue, .epBtnDropped').first().text();
await showModal('操作确认', `确定要将第 1 集到第 ${epNum} 集全部标记为“看过”吗？`);
origEpStatusClick.apply(this, arguments);
} catch (e) {
// 用户取消操作
}
} else {
origEpStatusClick.apply(this, arguments);
}
};
}
}
/**
* 创建主管理面板 (包含两种模式)
*/
function createManagerPanel() {
const panel = document.createElement('div');
panel.id = 'range-manager-panel';
panel.style.cssText = 'display: none; border: 1px solid #E0E0E0; border-radius: 5px; margin-top: 10px; background-color: #F9F9F9;';
// Tab 切换
panel.innerHTML = `
<div id="manager-tabs" style="display: flex; border-bottom: 1px solid #e0e0e0;">
<button class="tab-btn active" data-tab="interactive">范围选择</button>
<button class="tab-btn" data-tab="batch">文件式批量管理</button>
</div>
<div id="manager-content" style="padding: 10px;"></div>
`;
const contentDiv = panel.querySelector('#manager-content');
contentDiv.innerHTML = createInteractivePanelHtml(); // 默认显示交互模式
panel.querySelectorAll('.tab-btn').forEach(btn => {
btn.onclick = (e) => {
panel.querySelector('.tab-btn.active').classList.remove('active');
e.target.classList.add('active');
if (e.target.dataset.tab === 'interactive') {
contentDiv.innerHTML = createInteractivePanelHtml();
bindInteractivePanelEvents();
} else {
contentDiv.innerHTML = createBatchPanelHtml();
bindBatchPanelEvents();
}
};
});
// Tab 样式
const style = document.createElement('style');
style.textContent = `
.tab-btn { background: none; border: none; padding: 10px 15px; cursor: pointer; color: #555; font-size: 13px; }
.tab-btn.active { background-color: #fff; border-bottom: 2px solid #f09199; font-weight: bold; }
#batch-textarea { width: 95%; min-height: 100px; padding: 5px; border: 1px solid #ccc; border-radius: 3px; font-family: monospace; }
`;
document.head.appendChild(style);
// 绑定默认面板的事件
setTimeout(() => bindInteractivePanelEvents(), 0);
return panel;
}
// --- 交互选择模式 ---
function createInteractivePanelHtml() {
return `
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
<label>范围:</label>
<input type="number" id="range-start" class="inputtext" style="width: 60px;" min="1" placeholder="开始">
<span>-</span>
<input type="number" id="range-end" class="inputtext" style="width: 60px;" min="1" placeholder="结束">
<button id="interactive-select-btn" class="chiiBtn">交互选择模式</button>
</div>
<button id="mark-watched-interactive-btn" class="inputBtn" style="width: 100%;">标记为看过</button>
<div id="interactive-progress" style="margin-top: 5px; color: #666; font-size: 12px;"></div>
`;
}
function bindInteractivePanelEvents() {
document.getElementById('interactive-select-btn').onclick = toggleSelectionMode;
document.getElementById('mark-watched-interactive-btn').onclick = () => {
const start = document.getElementById('range-start').value;
const end = document.getElementById('range-end').value;
executeMarking([{ start, end, status: 'w' }], 'interactive-progress');
};
}
function toggleSelectionMode() {
const btn = document.getElementById('interactive-select-btn');
const episodeList = document.querySelector('ul.prg_list');
selectionState.isActive = !selectionState.isActive;
if (selectionState.isActive) {
selectionState.step = 'start';
btn.textContent = '请选择开始集数';
btn.classList.add('inputBtn'); //
episodeList.style.cursor = 'pointer';
episodeList.addEventListener('click', handleEpisodeSelection);
} else {
resetSelectionMode();
}
}
function resetSelectionMode() {
const btn = document.getElementById('interactive-select-btn');
const episodeList = document.querySelector('ul.prg_list');
selectionState.isActive = false;
if(btn) btn.textContent = '范围选择';
if(btn) btn.classList.remove('inputBtn');
if(episodeList) {
episodeList.style.cursor = '';
episodeList.removeEventListener('click', handleEpisodeSelection);
}
}
function handleEpisodeSelection(e) {
e.preventDefault();
const epNum = parseInt(e.target.textContent, 10);
if (isNaN(epNum)) return;
const startInput = document.getElementById('range-start');
const endInput = document.getElementById('range-end');
const btn = document.getElementById('interactive-select-btn');
if (selectionState.step === 'start') {
startInput.value = epNum;
endInput.value = ''; // 清空结束，以便重新选择
selectionState.step = 'end';
btn.textContent = '请选择结束集数';
} else {
// 自动判断大小并填充
const startVal = parseInt(startInput.value, 10);
if (epNum < startVal) {
endInput.value = startVal;
startInput.value = epNum;
} else {
endInput.value = epNum;
}
resetSelectionMode();
}
}
// --- 批量输入模式 ---
function createBatchPanelHtml() {
return `
<p style="font-size: 12px; color: #666; margin-top: 0;">每行一条指令: <b>开始集数 结束集数 状态码</b><br>状态码: <b>w</b>=看过, <b>q</b>=想看, <b>d</b>=抛弃</p>
<textarea id="batch-textarea" placeholder="例如:\n1 12 w\n25 25 d\n130 120 q (范围会自动修正)"></textarea>
<button id="batch-execute-btn" class="inputBtn" style="margin-top: 10px; width: 100%;">预览并执行</button>
<div id="batch-progress" style="margin-top: 5px; color: #666; font-size: 12px;"></div>
`;
}
function bindBatchPanelEvents() {
document.getElementById('batch-execute-btn').onclick = handleBatchInput;
}
async function handleBatchInput() {
const text = document.getElementById('batch-textarea').value;
const lines = text.split('\n').filter(line => line.trim() !== '');
const progressDiv = document.getElementById('batch-progress');
let tasks = [];
let errors = [];
lines.forEach((line, index) => {
const parts = line.trim().split(/\s+/);
if (parts.length !== 3) {
errors.push(`第 ${index + 1} 行格式错误。`);
return;
}
let [start, end, status] = parts;
start = parseInt(start, 10);
end = parseInt(end, 10);
status = status.toLowerCase();
if (isNaN(start) || isNaN(end)) {
errors.push(`第 ${index + 1} 行的集数无效。`);
return;
}
if (!STATUS_MAP[status]) {
errors.push(`第 ${index + 1} 行的状态码 "${status}" 无效。`);
return;
}
// 智能修正范围
if (start > end) [start, end] = [end, start];
tasks.push({ start, end, status });
});
if (errors.length > 0) {
progressDiv.textContent = errors.join(' ');
return;
}
if(tasks.length === 0) {
progressDiv.textContent = '没有可执行的操作。'; return;
}
const previewHtml = tasks.map(t => `<li>将 ${t.start}-${t.end} 集标记为 <b>${STATUS_MAP[t.status].text}</b></li>`).join('');
try {
await showModal('操作预览', `<p>将执行以下 ${tasks.length} 个操作，请确认:</p><ul style="margin-top: 10px; padding-left: 20px;">${previewHtml}</ul>`);
executeMarking(tasks, 'batch-progress');
} catch(e) {
progressDiv.textContent = '操作已取消。';
}
}
// --- 通用执行与工具函数 ---
async function executeMarking(tasks, progressDivId) {
const progressDiv = document.getElementById(progressDivId);
const allButtons = document.querySelectorAll('#interactive-select-btn, #mark-watched-interactive-btn, #batch-execute-btn');
allButtons.forEach(btn => btn.disabled = true);
progressDiv.textContent = '正在准备...';
const epMap = getEpisodeMap();
const token = getSecurityToken();
if (!token) {
progressDiv.textContent = '错误: 无法获取安全令牌。';
allButtons.forEach(btn => btn.disabled = false);
return;
}
let totalMarked = 0;
for (const task of tasks) {
for (let i = task.start; i <= task.end; i++) {
const epInfo = epMap[i];
if (epInfo) {
progressDiv.textContent = `标记中: ${i}集 -> ${STATUS_MAP[task.status].text}...`;
await updateEpStatus(epInfo.id, task.status, token);
updateButtonLook(epInfo.button, task.status);
totalMarked++;
}
}
}
progressDiv.textContent = `完成! 共标记了 ${totalMarked} 个剧集。`;
allButtons.forEach(btn => btn.disabled = false);
}
function updateEpStatus(epId, statusKey, token) {
const apiKey = STATUS_MAP[statusKey].apiKey;
const url = `/subject/ep/${epId}/status/${apiKey}?gh=${token}`;
return new Promise(resolve => {
fetch(url)
.catch(err => console.error(`更新剧集 ${epId} 失败:`, err))
.finally(() => setTimeout(resolve, API_CALL_DELAY));
});
}
function updateButtonLook(button, statusKey) {
if (!button) return;
Object.values(STATUS_MAP).forEach(s => button.classList.remove(s.cssClass));
button.classList.remove('epBtnAir', 'epBtnNA', 'epBtnUnknown');
button.classList.add(STATUS_MAP[statusKey].cssClass);
}
function getEpisodeMap() {
const map = {};
document.querySelectorAll('ul.prg_list li a').forEach(btn => {
const epNum = parseInt(btn.textContent, 10);
const epIdMatch = btn.id.match(/prg_(\d+)/);
if (!isNaN(epNum) && epIdMatch) map[epNum] = { id: epIdMatch[1], button: btn };
});
return map;
}
function getSecurityToken() {
const sampleLink = document.querySelector('div.prg_popup a[id^="Watched_"]');
return sampleLink ? sampleLink.href.match(/gh=([a-f0-9]+)/)?.[1] : null;
}
main();
})();