// 弹幕功能封装
(function() {
let barrageInstance = null; // 单例实例引用
// 获取 Artalk 评论数据
function getArtalkComments() {
return new Promise((resolve) => {
let isResolved = false;
let interval = null;
// 安全获取评论列表的辅助函数
const safeGetComments = () => {
if (!window.artalk) return null;
if (typeof window.artalk.getComments === 'function') return window.artalk.getComments();
if (typeof window.artalk.getCommentList === 'function') return window.artalk.getCommentList();
// 尝试访问内部数据 (Artalk v2 hack)
if (window.artalk.ctx && window.artalk.ctx.get('list') && typeof window.artalk.ctx.get('list').getComments === 'function') {
return window.artalk.ctx.get('list').getComments();
}
return null;
};
const tryResolve = (data, source) => {
if (isResolved) return;
if (Array.isArray(data)) {
// 如果是事件触发(说明已加载完成),或者是轮询且有数据,则认为成功
if (source === 'event' || data.length > 0) {
console.log(`[Barrage] 数据获取成功 (${source}): ${data.length} 条`);
isResolved = true;
if (interval) clearInterval(interval);
resolve(data);
}
}
};
// 检查 Artalk 实例并尝试获取数据
const checkArtalk = () => {
if (isResolved) return;
// 如果当前页面没有评论区,不要等待 Artalk 初始化,直接返回空
// 这样可以避免在无评论页(如首页)长时间等待超时
const hasCommentSection = document.getElementById('artalk') ||
document.getElementById('Comments') ||
document.querySelector('.atk-comment-wrap');
if (!hasCommentSection) {
// 延迟一点点返回,确保逻辑统一
setTimeout(() => {
tryResolve([], 'no-comment-section');
}, 100);
return;
}
if (window.artalk) {
// 1. 尝试绑定事件 (只绑定一次)
if (!window.artalk._barrageListenerAttached && typeof window.artalk.on === 'function') {
window.artalk.on('list-loaded', (data) => {
tryResolve(data, 'event');
});
window.artalk._barrageListenerAttached = true;
console.log('[Barrage] Artalk 事件监听已绑定');
}
// 2. 尝试直接获取数据
const data = safeGetComments();
if (data) {
tryResolve(data, 'poll');
}
}
};
// 立即检查
checkArtalk();
// 轮询检查 (直到获取数据或超时)
// 增加轮询频率,以便更快响应 Artalk 初始化
interval = setInterval(checkArtalk, 200);
// 超时处理 (8秒)
setTimeout(() => {
if (!isResolved) {
if (interval) clearInterval(interval);
console.warn('[Barrage] 获取数据超时');
// 最后的尝试:DOM 兜底 (适用于静态页面或 API 失败但 DOM 已渲染的情况)
const domComments = document.querySelectorAll('.atk-comment-wrap');
if (domComments.length > 0) {
console.log(`[Barrage] 从 DOM 挽救数据: ${domComments.length} 条`);
const fallbackData = Array.from(domComments).map(el => {
const idStr = el.id || '';
const id = idStr.replace('atk-comment-', '');
const contentEl = el.querySelector('.atk-content');
const avatarEl = el.querySelector('.atk-avatar img');
if (!id || !contentEl) return null;
return {
id: id,
content: contentEl.innerText || contentEl.textContent,
avatar: avatarEl ? avatarEl.src : '',
ua: null
};
}).filter(Boolean);
if (fallbackData.length > 0) {
resolve(fallbackData);
return;
}
}
resolve([]);
}
}, 8000);
});
}
// 获取 Hitokoto 一言
async function fetchHitokoto(url) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error('Network response was not ok');
const data = await res.json();
return {
id: `hitokoto-${data.id}`,
content: data.hitokoto,
from: data.from
};
} catch (e) {
console.warn('[Barrage] Hitokoto fetch failed:', e);
return null;
}
}
class BarrageEngine {
constructor(options = {}) {
this.container = typeof options.container === 'string'
? document.querySelector(options.container)
: options.container;
if (!this.container) {
console.warn('[Barrage] 错误: 找不到弹幕容器');
return;
}
this.data = [];
this.index = 0;
this.timer = null;
this.isPaused = false;
this.isDestroyed = false;
// 追踪当前屏幕上显示的弹幕 ID
this.activeIds = new Set();
// 最大同屏数量限制,防止卡顿
this.maxActiveItems = 30;
// 绑定事件委托
this.initEventDelegation();
}
initEventDelegation() {
// 鼠标进入容器暂停
this.container.addEventListener('mouseover', (e) => {
const item = e.target.closest('.barrage-item');
if (item) {
item.style.animationPlayState = 'paused';
item.style.zIndex = '9999';
}
});
// 鼠标离开恢复
this.container.addEventListener('mouseout', (e) => {
const item = e.target.closest('.barrage-item');
if (item) {
item.style.animationPlayState = 'running';
item.style.zIndex = '';
}
});
// 点击事件
this.container.addEventListener('click', (e) => {
const item = e.target.closest('.barrage-item');
if (item) {
const url = item.dataset.url;
if (url && url !== '#') {
e.stopPropagation();
e.preventDefault();
const targetId = url.split('#')[1];
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
targetEl.classList.add('atk-flash');
setTimeout(() => targetEl.classList.remove('atk-flash'), 2000);
} else {
window.location.href = url;
}
}
}
});
}
start(data = []) {
this.stop();
this.clearDOM();
this.isDestroyed = false;
this.updateData(data);
}
updateData(data = []) {
// 数据预处理:去重 & ID 规范化
const uniqueData = [];
const seenIds = new Set();
data.forEach(item => {
const id = String(item.id);
if (!seenIds.has(id)) {
seenIds.add(id);
uniqueData.push({ ...item, id: id });
}
});
this.data = uniqueData;
// 如果数据更新时列表变短了,重置索引以防越界
if (this.index >= this.data.length) {
this.index = 0;
}
console.log(`[Barrage] 数据更新: ${this.data.length} 条`);
if (this.data.length > 0 && !this.timer && !this.isPaused) {
this.loop();
}
}
hide() {
if (this.container) {
this.container.style.opacity = '0';
this.container.style.pointerEvents = 'none';
}
this.isPaused = true;
}
show() {
if (this.container) {
this.container.style.opacity = '1';
this.container.style.pointerEvents = 'auto';
}
this.isPaused = false;
if (!this.timer) this.loop();
}
stop() {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
// 注意:不清除 activeIds,允许已发射的弹幕飞完
}
clearDOM() {
if (this.container) {
this.container.innerHTML = '';
}
this.activeIds.clear();
}
destroy() {
this.isDestroyed = true;
this.stop();
this.clearDOM();
}
loop() {
if (this.isDestroyed || this.isPaused) return;
// 容器检测
if (!document.body.contains(this.container)) {
this.destroy();
return;
}
if (this.data.length > 0) {
// 只有当前屏幕数量未满时才发射
if (this.activeIds.size < this.maxActiveItems) {
this.tryShoot();
}
}
// 随机间隔 2s - 4s
const interval = 2000 + Math.random() * 2000;
this.timer = setTimeout(() => this.loop(), interval);
}
tryShoot() {
if (this.data.length === 0) return;
let attempts = 0;
const maxAttempts = this.data.length;
while (attempts < maxAttempts) {
const item = this.data[this.index];
this.index = (this.index + 1) % this.data.length;
if (!this.activeIds.has(item.id)) {
this.shoot(item);
return;
}
attempts++;
}
}
shoot(itemData) {
const { text, avatar, url, id } = itemData;
this.activeIds.add(id);
const item = document.createElement('div');
item.className = 'barrage-item';
// 存储 URL 到 dataset 以供事件委托使用
if (url && url !== '#') {
item.dataset.url = url;
item.style.cursor = 'pointer';
}
let html = '';
// 优化:只有当有头像时才渲染 img 标签
// 移除 loading="lazy" 以修复弹幕头像加载问题
if (avatar) {
html += ``;
}
html += `