mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 14:41:20 -08:00
320 lines
10 KiB
JavaScript
320 lines
10 KiB
JavaScript
import { bilibiliDanmuParseFromUrl } from './bilibiliDanmuParse';
|
|
import getDanmuTop from './getDanmuTop';
|
|
|
|
export default class Danmuku {
|
|
constructor(art, option) {
|
|
this.art = art;
|
|
this.queue = [];
|
|
this.layer = null;
|
|
this.isStop = false;
|
|
this.animationFrameTimer = null;
|
|
art.i18n.update(Danmuku.i18n);
|
|
art.on('video:play', this.start.bind(this));
|
|
art.on('video:playing', this.start.bind(this));
|
|
art.on('video:pause', this.stop.bind(this));
|
|
art.on('video:waiting', this.stop.bind(this));
|
|
art.on('destroy', this.stop.bind(this));
|
|
this.config(option);
|
|
if (typeof this.option.danmus === 'function') {
|
|
this.option.danmus().then(danmus => {
|
|
danmus.forEach(this.addToQueue.bind(this));
|
|
this.init();
|
|
});
|
|
} else if (typeof this.option.danmus === 'string') {
|
|
bilibiliDanmuParseFromUrl(this.option.danmus).then(danmus => {
|
|
danmus.forEach(this.addToQueue.bind(this));
|
|
this.init();
|
|
});
|
|
} else {
|
|
this.option.danmus.forEach(this.addToQueue.bind(this));
|
|
this.init();
|
|
}
|
|
}
|
|
|
|
static get i18n() {
|
|
return {
|
|
'zh-cn': {
|
|
'Danmu text cannot be empty': '弹幕文本不能为空',
|
|
'The length of the danmu does not exceed': '弹幕文本字数不能超过',
|
|
},
|
|
'zh-tw': {
|
|
'Danmu text cannot be empty': '彈幕文本不能為空',
|
|
'The length of the danmu does not exceed': '彈幕文本字數不能超過',
|
|
},
|
|
};
|
|
}
|
|
|
|
static get option() {
|
|
return {
|
|
danmus: [],
|
|
speed: 5,
|
|
opacity: 1,
|
|
color: '#fff',
|
|
size: 25,
|
|
maxlength: 50,
|
|
margin: [10, 20],
|
|
};
|
|
}
|
|
|
|
static get scheme() {
|
|
return {
|
|
danmus: 'array|function|string',
|
|
speed: 'number',
|
|
opacity: 'number',
|
|
color: 'string',
|
|
size: 'number',
|
|
maxlength: 'number',
|
|
margin: 'array',
|
|
};
|
|
}
|
|
|
|
static getRect(ref, key) {
|
|
const result = ref.getBoundingClientRect();
|
|
return key ? result[key] : result;
|
|
}
|
|
|
|
config(option) {
|
|
const {
|
|
utils: { clamp },
|
|
validator,
|
|
} = this.art.constructor;
|
|
this.option = Object.assign({}, Danmuku.option, option);
|
|
validator(this.option, Danmuku.scheme);
|
|
this.option.speed = clamp(this.option.speed, 1, 10);
|
|
this.option.opacity = clamp(this.option.opacity, 0, 1);
|
|
this.option.size = clamp(this.option.size, 12, 30);
|
|
this.option.maxlength = clamp(this.option.maxlength, 10, 100);
|
|
this.option.margin[0] = clamp(this.option.margin[0], 0, 100);
|
|
this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
|
|
}
|
|
|
|
init() {
|
|
this.art.emit('artplayerPluginDanmu:loaded');
|
|
this.layer = this.art.layers.add({
|
|
name: 'danmu',
|
|
style: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
pointerEvents: 'none',
|
|
opacity: this.option.opacity,
|
|
},
|
|
});
|
|
}
|
|
|
|
emit(danmu) {
|
|
const { $player } = this.art.template;
|
|
danmu.$ref = this.getDanmuRef();
|
|
danmu.$ref.innerText = danmu.text;
|
|
danmu.$ref.style.fontSize = `${danmu.size || this.option.size}px`;
|
|
const playerWidth = Danmuku.getRect($player, 'width');
|
|
const danmuWidth = Danmuku.getRect(danmu.$ref, 'width');
|
|
danmu.$restWidth = playerWidth + danmuWidth + 5;
|
|
danmu.$restTime = this.option.speed;
|
|
danmu.$lastStartTime = Date.now();
|
|
danmu.$ref.style.color = danmu.color || this.option.color;
|
|
danmu.$ref.style.left = `${playerWidth}px`;
|
|
danmu.$ref.style.top = `${this.getDanmuTop()}px`;
|
|
danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
|
|
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
|
|
if (danmu.border) {
|
|
danmu.$ref.style.border = `1px solid ${danmu.border}`;
|
|
}
|
|
danmu.$state = 'emit';
|
|
}
|
|
|
|
static continue(danmu) {
|
|
danmu.$lastStartTime = Date.now();
|
|
danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
|
|
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
|
|
danmu.$state = 'emit';
|
|
}
|
|
|
|
suspend(danmu) {
|
|
const { $player } = this.art.template;
|
|
const { left: playerLeft, width: playerWidth } = Danmuku.getRect($player);
|
|
const { left: danmuLeft } = Danmuku.getRect(danmu.$ref);
|
|
danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
|
|
const translateX = playerWidth - (danmuLeft - playerLeft) + 5;
|
|
danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
|
|
danmu.$ref.style.transition = 'transform 0s linear 0s';
|
|
danmu.$state = 'stop';
|
|
}
|
|
|
|
addToQueue(danmu) {
|
|
const { notice, player, i18n } = this.art;
|
|
if (!danmu.text.trim()) {
|
|
notice.show(i18n.get('Danmu text cannot be empty'));
|
|
return;
|
|
}
|
|
|
|
if (danmu.text.length > this.option.maxlength) {
|
|
notice.show(`${i18n.get('The length of the danmu does not exceed')} ${this.option.maxlength}`);
|
|
return;
|
|
}
|
|
|
|
if (typeof danmu.time !== 'number') {
|
|
danmu.time = player.currentTime;
|
|
}
|
|
|
|
this.queue.push({
|
|
...danmu,
|
|
$state: 'wait',
|
|
$ref: null,
|
|
$restTime: 0,
|
|
$lastStartTime: 0,
|
|
});
|
|
}
|
|
|
|
getDanmuRef() {
|
|
const { $player } = this.art.template;
|
|
const { setStyles, append } = this.art.constructor.utils;
|
|
const playerLeft = Danmuku.getRect($player, 'left');
|
|
|
|
const waitDanmu = this.queue.find(danmu => {
|
|
if (danmu.$ref) {
|
|
const { left: danmuLeft, width: danmuWidth } = Danmuku.getRect(danmu.$ref);
|
|
return danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
if (waitDanmu) {
|
|
waitDanmu.$state = 'wait';
|
|
waitDanmu.$ref.style.border = 'none';
|
|
waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
|
|
waitDanmu.$ref.style.transition = 'transform 0s linear 0s';
|
|
this.layer.$ref.appendChild(waitDanmu.$ref);
|
|
return waitDanmu.$ref;
|
|
}
|
|
|
|
const $ref = document.createElement('div');
|
|
|
|
setStyles($ref, {
|
|
userSelect: 'none',
|
|
position: 'absolute',
|
|
whiteSpace: 'pre',
|
|
pointerEvents: 'none',
|
|
perspective: '500px',
|
|
display: 'inline-block',
|
|
willChange: 'transform',
|
|
fontFamily: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
|
|
fontWeight: 'normal',
|
|
lineHeight: '1.125',
|
|
textShadow:
|
|
'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px',
|
|
});
|
|
|
|
append(this.layer.$ref, $ref);
|
|
return $ref;
|
|
}
|
|
|
|
getDanmuTop() {
|
|
const { $player } = this.art.template;
|
|
const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = Danmuku.getRect($player);
|
|
const danmus = this.queue.filter(danmu => danmu.$state === 'emit');
|
|
|
|
if (danmus.length === 0) {
|
|
return this.option.margin[0];
|
|
}
|
|
|
|
const danmusBySort = danmus
|
|
.map(danmu => {
|
|
const { left: danmuLeft, top: danmuTop, width: danmuWidth, height: danmuHeight } = Danmuku.getRect(
|
|
danmu.$ref,
|
|
);
|
|
const top = danmuTop - playerTop;
|
|
const left = danmuLeft - playerLeft;
|
|
const right = playerWidth - left - danmuWidth;
|
|
return {
|
|
top,
|
|
left,
|
|
right,
|
|
height: danmuHeight,
|
|
width: danmuWidth,
|
|
};
|
|
})
|
|
.sort((prev, next) => {
|
|
return prev.top - next.top;
|
|
});
|
|
|
|
danmusBySort.unshift({
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: this.option.margin[0],
|
|
width: playerWidth,
|
|
});
|
|
|
|
danmusBySort.push({
|
|
top: playerHeight - this.option.margin[1],
|
|
left: 0,
|
|
right: 0,
|
|
height: this.option.margin[1],
|
|
width: playerWidth,
|
|
});
|
|
|
|
return getDanmuTop(danmusBySort);
|
|
}
|
|
|
|
update() {
|
|
const { player } = this.art;
|
|
this.animationFrameTimer = window.requestAnimationFrame(() => {
|
|
if (this.layer && player.playing) {
|
|
this.queue
|
|
.filter(danmu => {
|
|
return (
|
|
player.currentTime + 0.1 >= danmu.time &&
|
|
danmu.time >= player.currentTime - 0.1 &&
|
|
danmu.$state === 'wait'
|
|
);
|
|
})
|
|
.forEach(danmu => {
|
|
this.emit(danmu);
|
|
});
|
|
}
|
|
|
|
if (!this.isStop) {
|
|
this.update();
|
|
}
|
|
});
|
|
}
|
|
|
|
stop() {
|
|
this.isStop = true;
|
|
this.queue
|
|
.filter(danmu => danmu.$state === 'emit')
|
|
.forEach(danmu => {
|
|
this.suspend(danmu);
|
|
});
|
|
window.cancelAnimationFrame(this.animationFrameTimer);
|
|
this.art.emit('artplayerPluginDanmu:stop');
|
|
}
|
|
|
|
start() {
|
|
this.isStop = false;
|
|
this.queue
|
|
.filter(danmu => danmu.$state === 'stop')
|
|
.forEach(danmu => {
|
|
Danmuku.continue(danmu);
|
|
});
|
|
this.update();
|
|
this.art.emit('artplayerPluginDanmu:start');
|
|
}
|
|
|
|
show() {
|
|
this.layer.$ref.style = 'none';
|
|
this.art.emit('artplayerPluginDanmu:show');
|
|
}
|
|
|
|
hide() {
|
|
this.layer.$ref.style = 'block';
|
|
this.art.emit('artplayerPluginDanmu:hide');
|
|
}
|
|
}
|