x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-24 14:41:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

chore: Optimize danmuku plugin performance and update configuration handling

Browse Source
This commit is contained in:
Harvey Zack committed 2024-05-28 09:32:24 +08:00
1 parent e91bcff3a8
commit a158c5ebdc
3 files changed
+29 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-danmuku/src/danmuku.js
+15 -12
View File
@@ -237,6 +237,12 @@ export default class Danmuku {
return result;
}
get speed() {
return this.option.synchronousPlayback && this.art.playbackRate
? this.option.speed / Number(this.art.playbackRate)
: this.option.speed;
}
// 加载弹幕
async load() {
const { errorHandle } = this.utils;
@@ -483,17 +489,17 @@ export default class Danmuku {
danmu.$lastStartTime = Date.now();
// 计算弹幕剩余时间
danmu.$restTime =
this.option.synchronousPlayback && this.art.playbackRate
? this.option.speed / Number(this.art.playbackRate)
: this.option.speed;
danmu.$restTime = this.speed;
// 计算弹幕滚动的距离
const distance = clientWidth + danmu.$ref.clientWidth;
// 计算弹幕的top值
const { top } = await this.postMessage({
target: {
mode: danmu.mode,
height: danmu.$ref.clientHeight,
speed: (clientWidth + danmu.$ref.clientWidth) / danmu.$restTime,
speed: distance / danmu.$restTime,
}, // 当前弹幕信息
visibles: this.visibles, // 可见的弹幕的数据
antiOverlap: this.option.antiOverlap,
@@ -506,16 +512,14 @@ export default class Danmuku {
if (danmu.$ref) {
if (!this.isStop && top !== undefined) {
this.setState(danmu, 'emit'); // 转换为emit状态
danmu.$ref.style.top = `${top}px`;
danmu.$ref.style.visibility = 'visible';
danmu.$ref.dataset.mode = danmu.mode; // CSS控制模式的显示和隐藏
this.art.emit('artplayerPluginDanmuku:visible', danmu);
switch (danmu.mode) {
// 滚动的弹幕
case 0: {
danmu.$ref.style.top = `${top}px`;
const translateX = clientWidth + danmu.$ref.clientWidth;
danmu.$ref.style.transform = `translateX(${-translateX}px)`;
danmu.$ref.style.transform = `translateX(${-distance}px)`;
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
break;
}
@@ -523,12 +527,13 @@ export default class Danmuku {
// falls through
case 2:
danmu.$ref.style.left = '50%';
danmu.$ref.style.top = `${top}px`;
danmu.$ref.style.marginLeft = `-${danmu.$ref.clientWidth / 2}px`;
break;
default:
break;
}
this.art.emit('artplayerPluginDanmuku:visible', danmu);
} else {
// 假如弹幕已经停止或者没有 top 值，则重置弹幕为ready状态，回收弹幕DOM节点，等待下次发送
this.setState(danmu, 'ready');
@@ -556,8 +561,6 @@ export default class Danmuku {
switch (danmu.mode) {
// 滚动的弹幕
case 0:
const translateX = clientWidth + danmu.$ref.clientWidth;
danmu.$ref.style.transform = `translateX(${-translateX}px)`;
break;
default:
break;