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

update danmuku.js

Browse Source
This commit is contained in:
Harvey committed 2022-04-29 15:33:21 +08:00
1 parent e7c23f359a
commit 06782590b7
3 files changed
+108 -30
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-danmuku/index.js
+54 -17
View File
@@ -315,15 +315,21 @@ class Danmuku {
return this;
}
continue() {
const { $player } = this.art.template;
const playerWidth = this.getRect($player, 'width');
this.filter('stop', (danmu)=>{
danmu.$state = 'emit';
danmu.$ref.dataset.state = 'emit';
danmu.$lastStartTime = Date.now();
switch(danmu.mode){
case 0:
danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
break;
{
const danmuWidth = this.getRect(danmu.$ref, 'width');
const translateX = playerWidth + danmuWidth;
danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
break;
}
default:
break;
}
@@ -353,31 +359,60 @@ class Danmuku {
}
resize() {
const { $player } = this.art.template;
const danmuLeft = this.getRect($player, 'width');
const { left: playerLeft , width: playerWidth } = this.getRect($player);
this.filter('wait', (danmu)=>{
if (danmu.$ref) {
danmu.$ref.style.border = 'none';
danmu.$ref.style.left = `${danmuLeft}px`;
danmu.$ref.style.left = `${playerWidth}px`;
danmu.$ref.style.marginLeft = '0px';
danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
danmu.$ref.style.transition = 'transform 0s linear 0s';
}
});
// this.filter('emit', (danmu) => {
// switch (danmu.mode) {
// case 0: {
// const { left: playerLeft, width: playerWidth } = this.getRect($player);
// const { left: danmuLeft } = this.getRect(danmu.$ref);
// const translateX = playerWidth - (danmuLeft - playerLeft);
// danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
// break;
// }
// default:
// break;
// }
// });
this.filter('stop', (danmu)=>{
switch(danmu.mode){
case 0:
{
const { left: danmuLeft } = this.getRect(danmu.$ref);
const translateX = playerWidth - (danmuLeft - playerLeft);
danmu.$ref.style.left = `${playerWidth}px`;
danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
break;
}
default:
break;
}
});
return this;
}
update() {
const { $player } = this.art.template;
this.animationFrameTimer = window.requestAnimationFrame(()=>{
if (this.art.playing && !this.isHide) {
const danmuLeft = this.getRect($player, 'width');
const playerWidth = this.getRect($player, 'width');
this.filter('emit', (danmu)=>{
danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
const time = (Date.now() - danmu.$lastStartTime) / 1000;
danmu.$emitTime += time;
danmu.$restTime -= time;
danmu.$lastStartTime = Date.now();
if (danmu.$restTime <= 0) {
danmu.$state = 'wait';
danmu.$ref.dataset.state = 'wait';
danmu.$ref.style.border = 'none';
danmu.$ref.style.left = `${danmuLeft}px`;
danmu.$ref.style.left = `${playerWidth}px`;
danmu.$ref.style.marginLeft = '0px';
danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
danmu.$ref.style.transition = 'transform 0s linear 0s';
@@ -394,19 +429,21 @@ class Danmuku {
danmu.$ref.style.color = danmu.color || '#fff';
danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color || '#fff'}` : 'none';
danmu.$restTime = this.option.synchronousPlayback && this.art.playbackRate ? this.option.speed / Number(this.art.playbackRate) : this.option.speed;
danmu.$lastStartTime = Date.now();
const danmuWidth = this.getRect(danmu.$ref, 'width');
const danmuTop = _getDanmuTopDefault.default(this, danmu);
danmu.$state = 'emit';
danmu.$ref.dataset.state = 'emit';
danmu.$lastStartTime = Date.now();
switch(danmu.mode){
case 0:
danmu.$restWidth = danmuLeft + danmuWidth;
danmu.$ref.style.left = `${danmuLeft}px`;
danmu.$ref.style.top = `${danmuTop}px`;
danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
break;
{
danmu.$ref.style.left = `${playerWidth}px`;
danmu.$ref.style.top = `${danmuTop}px`;
const translateX = playerWidth + danmuWidth;
danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
break;
}
case 1:
danmu.$ref.style.top = `${danmuTop}px`;
danmu.$ref.style.left = '50%';
@@ -464,9 +501,9 @@ class Danmuku {
...danmu,
$state: 'wait',
$ref: null,
$emitTime: 0,
$restTime: 0,
$lastStartTime: 0,
$restWidth: 0
$lastStartTime: 0
});
return this;
}