优化firefox下的弹幕热力图

This commit is contained in:
mtvpls
2026-01-15 22:12:50 +08:00
parent 0655bbc875
commit e392e9f543
+70 -7
View File
@@ -3806,6 +3806,11 @@ function PlayPageClient() {
});
danmakuPluginRef.current.load();
// 触发自定义事件通知热力图更新
if (artPlayerRef.current) {
artPlayerRef.current.emit('danmaku:loaded');
}
// 根据保存的显示状态来决定显示或隐藏弹幕
const savedDisplayState = loadDanmakuDisplayState();
if (savedDisplayState === false) {
@@ -4044,6 +4049,11 @@ function PlayPageClient() {
});
danmakuPluginRef.current.load();
// 触发自定义事件通知热力图更新
if (artPlayerRef.current) {
artPlayerRef.current.emit('danmaku:loaded');
}
// 根据保存的显示状态来决定显示或隐藏弹幕
const savedDisplayState = loadDanmakuDisplayState();
if (savedDisplayState === false) {
@@ -5850,6 +5860,14 @@ function PlayPageClient() {
const adjustHeatmapPosition = () => {
const progressBar = document.querySelector('.art-control-progress') as HTMLElement;
if (!progressBar) {
return;
}
if (!$el.parentElement) {
return;
}
if (progressBar && $el.parentElement) {
const rect = progressBar.getBoundingClientRect();
const parentRect = $el.parentElement.getBoundingClientRect();
@@ -5949,10 +5967,26 @@ function PlayPageClient() {
// 绘制热力图
const drawHeatmap = () => {
if (!artPlayerRef.current || heatmapData.length === 0) return;
// 检查热力图是否启用(与初始状态逻辑保持一致)
const storedValue = localStorage.getItem('danmaku_heatmap_enabled');
const enabled = storedValue !== null ? storedValue === 'true' : true; // 默认开启
if (!enabled) {
// 热力图已关闭,跳过绘制
return;
}
if (!artPlayerRef.current) {
return;
}
if (heatmapData.length === 0) {
return;
}
const ctx = canvas.getContext('2d');
if (!ctx) return;
if (!ctx) {
return;
}
const dpr = window.devicePixelRatio || 1;
const width = canvas.width / dpr;
@@ -6125,7 +6159,14 @@ function PlayPageClient() {
// 监听弹幕数据更新
const updateHeatmapData = () => {
if (!artPlayerRef.current || !danmakuPluginRef.current) return;
if (!artPlayerRef.current) {
return;
}
if (!danmakuPluginRef.current) {
return;
}
const duration = artPlayerRef.current.duration || 0;
// 直接从弹幕插件获取弹幕数据
@@ -6142,6 +6183,11 @@ function PlayPageClient() {
artPlayerRef.current.on('video:loadedmetadata', updateHeatmapData);
// 监听弹幕加载完成事件
artPlayerRef.current.on('danmaku:loaded', () => {
updateHeatmapData();
});
// 监听弹幕插件的配置变化
if (danmakuPluginRef.current) {
const originalConfig = danmakuPluginRef.current.config;
@@ -6152,10 +6198,27 @@ function PlayPageClient() {
};
}
// 初始尝试加载
setTimeout(updateHeatmapData, 500);
setTimeout(updateHeatmapData, 1500);
setTimeout(updateHeatmapData, 3000);
// 使用轮询机制等待弹幕插件准备好(替代固定延迟)
let pollAttempts = 0;
const maxPollAttempts = 60; // 最多尝试 60 次(30 秒)
const pollInterval = 500; // 每 500ms 检查一次
const pollForDanmakuPlugin = () => {
if (danmakuPluginRef.current && danmakuPluginRef.current.option?.danmuku) {
// 弹幕插件已准备好且有数据
updateHeatmapData();
return; // 成功,停止轮询
}
pollAttempts++;
if (pollAttempts < maxPollAttempts) {
// 继续轮询
setTimeout(pollForDanmakuPlugin, pollInterval);
}
};
// 开始轮询
setTimeout(pollForDanmakuPlugin, 500);
// 清理
return () => {