393 lines
14 KiB
JavaScript
393 lines
14 KiB
JavaScript
// 弹幕功能封装
|
|
(function() {
|
|
let barrageInstance = null; // 单例实例引用
|
|
|
|
// 获取 Artalk 评论数据
|
|
function getArtalkComments() {
|
|
return new Promise((resolve) => {
|
|
let isResolved = false;
|
|
|
|
const tryResolve = (data, source) => {
|
|
if (isResolved) return;
|
|
|
|
// 调试日志
|
|
if (data && Array.isArray(data)) {
|
|
console.log(`[Barrage] 数据检查 (${source}): ${data.length} 条`);
|
|
} else {
|
|
console.log(`[Barrage] 数据检查 (${source}): 无效数据`, data);
|
|
}
|
|
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
isResolved = true;
|
|
resolve(data);
|
|
}
|
|
};
|
|
|
|
// 1. 立即检查
|
|
if (window.artalk && typeof window.artalk.getComments === 'function') {
|
|
tryResolve(window.artalk.getComments(), 'immediate');
|
|
} else {
|
|
console.log('[Barrage] Artalk 实例未就绪 (Immediate)');
|
|
}
|
|
|
|
if (isResolved) return;
|
|
|
|
// 2. 监听加载完成事件 (推荐)
|
|
if (window.artalk && typeof window.artalk.on === 'function') {
|
|
window.artalk.on('list-loaded', (data) => {
|
|
console.log('[Barrage] list-loaded 事件触发');
|
|
// 优先使用事件传递的数据（如果有），否则调用 getComments
|
|
const comments = (Array.isArray(data) && data.length > 0) ? data : window.artalk.getComments();
|
|
tryResolve(comments, 'event');
|
|
});
|
|
}
|
|
|
|
// 3. 轮询 (后备)
|
|
let pollCount = 0;
|
|
const interval = setInterval(() => {
|
|
if (isResolved) {
|
|
clearInterval(interval);
|
|
return;
|
|
}
|
|
pollCount++;
|
|
if (window.artalk && typeof window.artalk.getComments === 'function') {
|
|
// 仅在有数据时才 resolve，避免轮询到空数据提前结束
|
|
const data = window.artalk.getComments();
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
tryResolve(data, `poll-${pollCount}`);
|
|
}
|
|
}
|
|
}, 500);
|
|
|
|
// 4. 超时处理 (5秒)
|
|
setTimeout(() => {
|
|
if (!isResolved) {
|
|
clearInterval(interval);
|
|
console.warn('[Barrage] 等待评论数据超时 (5s)');
|
|
|
|
// 尝试从 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 || ''; // atk-comment-123
|
|
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 : '',
|
|
// 模拟 Artalk 数据结构
|
|
ua: null
|
|
};
|
|
}).filter(Boolean);
|
|
|
|
if (fallbackData.length > 0) {
|
|
isResolved = true;
|
|
resolve(fallbackData);
|
|
return;
|
|
}
|
|
}
|
|
|
|
resolve([]); // 真的没有数据
|
|
}
|
|
}, 5000);
|
|
});
|
|
}
|
|
|
|
// 获取 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();
|
|
}
|
|
|
|
start(data = []) {
|
|
this.stop();
|
|
this.clearDOM();
|
|
this.isDestroyed = false;
|
|
|
|
// 数据预处理：去重 & 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;
|
|
console.log(`[Barrage] 启动: 原始 ${data.length}, 去重后 ${this.data.length}`);
|
|
|
|
if (this.data.length === 0) return;
|
|
|
|
this.loop();
|
|
}
|
|
|
|
stop() {
|
|
if (this.timer) {
|
|
clearTimeout(this.timer);
|
|
this.timer = null;
|
|
}
|
|
this.activeIds.clear();
|
|
}
|
|
|
|
clearDOM() {
|
|
if (this.container) {
|
|
this.container.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
destroy() {
|
|
this.isDestroyed = true;
|
|
this.stop();
|
|
this.clearDOM();
|
|
}
|
|
|
|
loop() {
|
|
if (this.isDestroyed) return;
|
|
|
|
// 容器检测
|
|
if (!document.body.contains(this.container)) {
|
|
// 尝试重新获取容器 (可能被 PJAX 替换但 ID 没变?)
|
|
// 这里简单处理：如果失效则停止
|
|
// console.warn('[Barrage] 容器失效，停止');
|
|
this.destroy();
|
|
return;
|
|
}
|
|
|
|
if (!this.isPaused && this.data.length > 0) {
|
|
this.tryShoot();
|
|
}
|
|
|
|
// 随机间隔 2s - 4s
|
|
const interval = 2000 + Math.random() * 2000;
|
|
this.timer = setTimeout(() => this.loop(), interval);
|
|
}
|
|
|
|
tryShoot() {
|
|
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';
|
|
|
|
let html = '';
|
|
if (avatar) {
|
|
html += `<img src="${avatar}" class="barrage-avatar" draggable="false">`;
|
|
}
|
|
html += `<div class="barrage-bubble"><span class="barrage-text">${text}</span></div>`;
|
|
item.innerHTML = html;
|
|
|
|
if (url && url !== '#') {
|
|
item.style.cursor = 'pointer';
|
|
item.addEventListener('click', (e) => {
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 样式与动画
|
|
const tracks = 10;
|
|
const trackIndex = Math.floor(Math.random() * tracks);
|
|
const top = 5 + (trackIndex * (90 / tracks));
|
|
|
|
item.style.top = `${top}%`;
|
|
|
|
const duration = 18 + Math.random() * 7;
|
|
item.style.animation = `barrage-slide-right ${duration}s linear forwards`;
|
|
|
|
item.addEventListener('mouseenter', () => {
|
|
item.style.animationPlayState = 'paused';
|
|
item.style.zIndex = '9999';
|
|
});
|
|
item.addEventListener('mouseleave', () => {
|
|
item.style.animationPlayState = 'running';
|
|
item.style.zIndex = '';
|
|
});
|
|
|
|
item.addEventListener('animationend', () => {
|
|
item.remove();
|
|
this.activeIds.delete(id);
|
|
});
|
|
|
|
this.container.appendChild(item);
|
|
}
|
|
}
|
|
|
|
// 辅助：判断移动端
|
|
function isMobile() {
|
|
return window.innerWidth < 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
}
|
|
|
|
// 主加载函数
|
|
async function loadBarrager() {
|
|
// 移动端禁用
|
|
if (isMobile()) {
|
|
console.log('[Barrage] 移动端禁用');
|
|
if (barrageInstance) barrageInstance.destroy();
|
|
return;
|
|
}
|
|
|
|
// 1. 获取容器，如果没有则动态创建
|
|
let container = document.querySelector('.barrager');
|
|
if (!container) {
|
|
console.warn('[Barrage] 未找到 .barrager 容器，尝试动态创建');
|
|
container = document.createElement('div');
|
|
container.className = 'barrager';
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
// 2. 清理旧实例
|
|
if (barrageInstance) {
|
|
barrageInstance.destroy();
|
|
barrageInstance = null;
|
|
}
|
|
|
|
try {
|
|
const config = window.barrageConfig || {};
|
|
const promises = [getArtalkComments()];
|
|
|
|
// 如果开启了 Hitokoto，则并发获取
|
|
if (config.enableHitokoto && config.hitokotoUrl) {
|
|
promises.push(fetchHitokoto(config.hitokotoUrl));
|
|
}
|
|
|
|
// 3. 获取数据 (支持事件监听 + 轮询 + Hitokoto)
|
|
const results = await Promise.allSettled(promises);
|
|
|
|
const barrageList = [];
|
|
|
|
// 处理 Artalk 评论
|
|
if (results[0].status === 'fulfilled' && Array.isArray(results[0].value)) {
|
|
const comments = results[0].value;
|
|
const processedComments = comments.map(c => {
|
|
const text = c.content.replace(/<[^>]+>/g, "").substring(0, 60);
|
|
if (!text.trim()) return null;
|
|
|
|
let avatar = '';
|
|
const domComment = document.getElementById(`atk-comment-${c.id}`);
|
|
if (domComment) {
|
|
const img = domComment.querySelector('.atk-avatar img');
|
|
if (img && img.src) avatar = img.src;
|
|
}
|
|
if (!avatar) {
|
|
avatar = c.avatar || (c.ua && c.ua.avatar) || 'https://cravatar.cn/avatar/default?d=mp';
|
|
}
|
|
|
|
return {
|
|
id: c.id,
|
|
text: text,
|
|
avatar: avatar,
|
|
url: `#atk-comment-${c.id}`
|
|
};
|
|
}).filter(Boolean);
|
|
barrageList.push(...processedComments);
|
|
}
|
|
|
|
// 处理 Hitokoto
|
|
if (results[1] && results[1].status === 'fulfilled' && results[1].value) {
|
|
const h = results[1].value;
|
|
barrageList.push({
|
|
id: h.id,
|
|
text: `${h.content}`,
|
|
avatar: 'https://cravatar.cn/avatar/default?d=mp',
|
|
url: '#'
|
|
});
|
|
}
|
|
|
|
if (barrageList.length === 0) {
|
|
console.log('[Barrage] 无弹幕数据');
|
|
return;
|
|
}
|
|
|
|
// 再次检查实例 (竞态保护)
|
|
if (barrageInstance) {
|
|
barrageInstance.destroy();
|
|
}
|
|
|
|
console.log(`[Barrage] 最终加载: ${barrageList.length} 条`);
|
|
barrageInstance = new BarrageEngine({ container });
|
|
barrageInstance.start(barrageList);
|
|
|
|
} catch (e) {
|
|
console.warn('[Barrage] 加载异常:', e);
|
|
}
|
|
}
|
|
|
|
// 暴露全局
|
|
window.loadBarrager = loadBarrager;
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
setTimeout(loadBarrager, 500);
|
|
});
|
|
|
|
})();
|