mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 16:11:20 -08:00
chore: Update danmuku plugin configuration handling and improve performance
This commit is contained in:
Harvey Zack committed
1 parent
0ae3b05d0a
commit
6d74b32b33
7 files changed
+165
-118
No files matched your search
@@ -18,6 +18,7 @@ export default class Danmuku {
|
||||
this.isStop = false; // 是否停止
|
||||
this.isHide = false; // 是否隐藏
|
||||
this.timer = null; // 定时器
|
||||
this.index = 0; // 弹幕索引
|
||||
|
||||
// 弹幕状态池
|
||||
this.states = {
|
||||
@@ -75,6 +76,11 @@ export default class Danmuku {
|
||||
maxLength: 200, // 弹幕输入框最大长度, 范围在[1 ~ 1000]
|
||||
lockTime: 5, // 输入框锁定时间，范围在[1 ~ 60]
|
||||
theme: 'dark', // 弹幕主题，支持 dark 和 light，只在自定义挂载时生效
|
||||
OPACITY: {}, // 不透明度配置项
|
||||
FONT_SIZE: {}, // 弹幕字号配置项
|
||||
MARGIN: {}, // 显示区域配置项
|
||||
SPEED: {}, // 弹幕速度配置项
|
||||
COLOR: [], // 颜色列表配置项
|
||||
};
|
||||
}
|
||||
|
||||
@@ -101,6 +107,11 @@ export default class Danmuku {
|
||||
maxLength: 'number',
|
||||
lockTime: 'number',
|
||||
theme: 'string',
|
||||
OPACITY: 'object',
|
||||
FONT_SIZE: 'object',
|
||||
MARGIN: 'object',
|
||||
SPEED: 'object',
|
||||
COLOR: 'array',
|
||||
};
|
||||
}
|
||||
|
||||
@@ -190,12 +201,16 @@ export default class Danmuku {
|
||||
return $ref;
|
||||
}
|
||||
|
||||
// 获取准备好发送的弹幕：有的是ready状态（如之前因为弹幕太多而暂停发送的弹幕），有的是wait状态
|
||||
// 获取准备好发送的弹幕
|
||||
get readys() {
|
||||
const { currentTime } = this.art;
|
||||
|
||||
const result = [];
|
||||
|
||||
// 有的是ready状态：之前因为弹幕太多而暂停发送的弹幕
|
||||
this.filter('ready', (danmu) => result.push(danmu));
|
||||
|
||||
// 有的是wait状态：符合时间范围的弹幕
|
||||
this.filter('wait', (danmu) => {
|
||||
if (currentTime + 0.1 >= danmu.time && danmu.time >= currentTime - 0.1) {
|
||||
result.push(danmu);
|
||||
@@ -264,6 +279,7 @@ export default class Danmuku {
|
||||
this.$danmuku.innerText = ''; // 清空弹幕层
|
||||
this.danmus.forEach((danmu) => this.emit(danmu)); // 逐个验证原始弹幕并转换为实际弹幕
|
||||
this.art.emit('artplayerPluginDanmuku:loaded', this.queue);
|
||||
console.log('Danmuku loaded:', this.queue);
|
||||
} catch (error) {
|
||||
this.art.emit('artplayerPluginDanmuku:error', error);
|
||||
throw error;
|
||||
@@ -322,16 +338,21 @@ export default class Danmuku {
|
||||
// 自定义弹幕过滤函数
|
||||
if (!this.option.filter(danmu)) return this;
|
||||
|
||||
// 转换为wait状态
|
||||
this.setState(danmu, 'wait');
|
||||
|
||||
// 添加到实际弹幕队列
|
||||
this.queue.push({
|
||||
// 添加自定义属性
|
||||
const item = {
|
||||
...danmu,
|
||||
$state: 'wait', // 弹幕初始状态
|
||||
$id: this.index++, // 弹幕唯一标识
|
||||
$ref: null, // 弹幕 DOM 节点
|
||||
$restTime: 0, // 弹幕剩余时间
|
||||
$lastStartTime: 0, // 弹幕上次开始时间
|
||||
});
|
||||
};
|
||||
|
||||
// 转换为wait状态
|
||||
this.setState(item, 'wait');
|
||||
|
||||
// 添加到实际弹幕队列
|
||||
this.queue.push(item);
|
||||
|
||||
// 弹幕有四个状态：
|
||||
// - wait: 弹幕还未开始显示，没有被添加到 DOM 中
|
||||
@@ -413,9 +434,7 @@ export default class Danmuku {
|
||||
// 设置弹幕状态
|
||||
setState(danmu, state) {
|
||||
// 从原状态池中删除
|
||||
if (danmu.$state) {
|
||||
this.states[danmu.$state] = this.states[danmu.$state].filter((item) => item !== danmu);
|
||||
}
|
||||
this.states[danmu.$state] = this.states[danmu.$state].filter((item) => item !== danmu);
|
||||
|
||||
// 设置新状态
|
||||
danmu.$state = state;
|
||||
|
||||
@@ -186,104 +186,100 @@ export default class Setting {
|
||||
}
|
||||
|
||||
get OPACITY() {
|
||||
return (
|
||||
this.option.OPACITY || {
|
||||
min: 0,
|
||||
max: 100,
|
||||
steps: [],
|
||||
}
|
||||
);
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
steps: [],
|
||||
...this.option.OPACITY,
|
||||
};
|
||||
}
|
||||
|
||||
get FONT_SIZE() {
|
||||
return (
|
||||
this.option.FONT_SIZE || {
|
||||
min: 12,
|
||||
max: 120,
|
||||
steps: [],
|
||||
}
|
||||
);
|
||||
return {
|
||||
min: 12,
|
||||
max: 120,
|
||||
steps: [],
|
||||
...this.option.FONT_SIZE,
|
||||
};
|
||||
}
|
||||
|
||||
get MARGIN() {
|
||||
return (
|
||||
this.option.MARGIN || {
|
||||
min: 0,
|
||||
max: 3,
|
||||
steps: [
|
||||
{
|
||||
name: '1/4',
|
||||
value: [10, '75%'],
|
||||
},
|
||||
{
|
||||
name: '半屏',
|
||||
value: [10, '50%'],
|
||||
},
|
||||
{
|
||||
name: '3/4',
|
||||
value: [10, '25%'],
|
||||
},
|
||||
{
|
||||
name: '满屏',
|
||||
value: [10, 10],
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
return {
|
||||
min: 0,
|
||||
max: 3,
|
||||
steps: [
|
||||
{
|
||||
name: '1/4',
|
||||
value: [10, '75%'],
|
||||
},
|
||||
{
|
||||
name: '半屏',
|
||||
value: [10, '50%'],
|
||||
},
|
||||
{
|
||||
name: '3/4',
|
||||
value: [10, '25%'],
|
||||
},
|
||||
{
|
||||
name: '满屏',
|
||||
value: [10, 10],
|
||||
},
|
||||
],
|
||||
...this.option.MARGIN,
|
||||
};
|
||||
}
|
||||
|
||||
get SPEED() {
|
||||
return (
|
||||
this.option.SPEED || {
|
||||
min: 0,
|
||||
max: 4,
|
||||
steps: [
|
||||
{
|
||||
name: '极慢',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: '较慢',
|
||||
value: 7.5,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
name: '适中',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: '较快',
|
||||
value: 2.5,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
name: '极快',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
return {
|
||||
min: 0,
|
||||
max: 4,
|
||||
steps: [
|
||||
{
|
||||
name: '极慢',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: '较慢',
|
||||
value: 7.5,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
name: '适中',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: '较快',
|
||||
value: 2.5,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
name: '极快',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
...this.option.SPEED,
|
||||
};
|
||||
}
|
||||
|
||||
get COLOR() {
|
||||
return (
|
||||
this.option.COLOR || [
|
||||
'#FE0302',
|
||||
'#FF7204',
|
||||
'#FFAA02',
|
||||
'#FFD302',
|
||||
'#FFFF00',
|
||||
'#A0EE00',
|
||||
'#00CD00',
|
||||
'#019899',
|
||||
'#4266BE',
|
||||
'#89D5FF',
|
||||
'#CC0273',
|
||||
'#222222',
|
||||
'#9B9B9B',
|
||||
'#FFFFFF',
|
||||
]
|
||||
);
|
||||
return this.option.COLOR.length
|
||||
? this.option.COLOR
|
||||
: [
|
||||
'#FE0302',
|
||||
'#FF7204',
|
||||
'#FFAA02',
|
||||
'#FFD302',
|
||||
'#FFFF00',
|
||||
'#A0EE00',
|
||||
'#00CD00',
|
||||
'#019899',
|
||||
'#4266BE',
|
||||
'#89D5FF',
|
||||
'#CC0273',
|
||||
'#222222',
|
||||
'#9B9B9B',
|
||||
'#FFFFFF',
|
||||
];
|
||||
}
|
||||
|
||||
query(selector) {
|
||||
|
||||
@@ -169,7 +169,7 @@ type Option = {
|
||||
// 不透明度配置项
|
||||
OPACITY?: Slider;
|
||||
|
||||
// 速度配置项
|
||||
// 弹幕速度配置项
|
||||
SPEED?: Slider;
|
||||
|
||||
// 显示区域配置项
|
||||
|
||||
@@ -62,7 +62,7 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
||||
|
||||
```js
|
||||
{
|
||||
danmuku: [], // 弹幕源
|
||||
danmuku: [], // 弹幕数据
|
||||
speed: 5, // 弹幕持续时间，范围在[1 ~ 10]
|
||||
margin: [10, '25%'], // 弹幕上下边距，支持像素数字和百分比
|
||||
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
|
||||
@@ -82,6 +82,11 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
||||
maxLength: 200, // 弹幕输入框最大长度, 范围在[1 ~ 1000]
|
||||
lockTime: 5, // 输入框锁定时间，范围在[1 ~ 60]
|
||||
theme: 'dark', // 弹幕主题，支持 dark 和 light，只在自定义挂载时生效
|
||||
OPACITY: {}, // 不透明度配置项
|
||||
FONT_SIZE: {}, // 弹幕字号配置项
|
||||
MARGIN: {}, // 显示区域配置项
|
||||
SPEED: {}, // 弹幕速度配置项
|
||||
COLOR: [], // 颜色列表配置项
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in new issue
Block a user