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

优化静止弹幕

Browse Source
This commit is contained in:
zhw2590582 committed 2019-05-03 13:44:12 +08:00
1 parent f4d097b918
commit 4dfcba5266
8 files changed
+122 -107
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-danmuku/src/danmuku.js
+32 -45
View File
@@ -1,6 +1,6 @@
import i18n from './i18n';
import { opacity, size, speed } from './setting';
import { filter, getRect } from './utils';
import { filter, getRect, getDanmuRef } from './utils';
import { bilibiliDanmuParseFromUrl } from './bilibili';
import getDanmuTop from './getDanmuTop';
@@ -22,6 +22,7 @@ export default class Danmuku {
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('resize', this.resize.bind(this));
art.on('destroy', this.stop.bind(this));
if (typeof this.option.danmuku === 'function') {
this.option.danmuku().then(danmus => {
@@ -80,7 +81,6 @@ export default class Danmuku {
continue() {
filter(this.queue, 'stop', danmu => {
danmu.$state = 'emit';
danmu.$lastStartTime = Date.now();
switch (danmu.mode) {
case 'scroll':
danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
@@ -98,7 +98,6 @@ export default class Danmuku {
filter(this.queue, 'emit', danmu => {
danmu.$state = 'stop';
const { left: danmuLeft } = getRect(danmu.$ref);
danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
const translateX = playerWidth - (danmuLeft - playerLeft) + 5;
switch (danmu.mode) {
case 'scroll':
@@ -111,54 +110,24 @@ export default class Danmuku {
});
}
getDanmuRef() {
resize() {
const { $player } = this.art.template;
const { setStyles, append } = this.art.constructor.utils;
const playerLeft = getRect($player, 'left');
const waitDanmu = this.queue.find(danmu => {
const danmuLeft = getRect($player, 'width');
filter(this.queue, 'wait', danmu => {
if (danmu.$ref) {
const { left: danmuLeft, width: danmuWidth } = getRect(danmu.$ref);
return danmu.$state === 'wait' || (danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth);
danmu.$ref.style.border = 'none';
danmu.$ref.style.left = `${danmuLeft}px`;
danmu.$ref.style.marginLeft = '0px';
danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
danmu.$ref.style.transition = 'transform 0s linear 0s';
}
return false;
});
if (waitDanmu && waitDanmu.$state === 'emit') {
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.$danmuku.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.$danmuku, $ref);
this.refs.push($ref);
return $ref;
}
getDanmuTop() {
getDanmuTop(mode) {
const { $player } = this.art.template;
const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = getRect($player);
const danmus = this.queue.filter(danmu => danmu.$state === 'emit');
const danmus = this.queue.filter(danmu => danmu.mode === mode && danmu.$state === 'emit');
if (danmus.length === 0) {
return this.option.margin[0];
@@ -208,6 +177,21 @@ export default class Danmuku {
} = this.art;
this.animationFrameTimer = window.requestAnimationFrame(() => {
if (player.playing) {
const danmuLeft = getRect($player, 'width');
filter(this.queue, 'emit', danmu => {
danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
danmu.$lastStartTime = Date.now();
if (danmu.$restTime <= 0) {
danmu.$state = 'wait';
danmu.$ref.style.border = 'none';
danmu.$ref.style.left = `${danmuLeft}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.queue
.filter(danmu => {
return (
@@ -218,7 +202,11 @@ export default class Danmuku {
})
.forEach(danmu => {
danmu.$state = 'emit';
danmu.$ref = this.getDanmuRef();
danmu.$ref = getDanmuRef(this.queue);
this.$danmuku.appendChild(danmu.$ref);
if (!this.refs.includes(danmu.$ref)) {
this.refs.push(danmu.$ref);
}
danmu.$ref.style.opacity = this.option.opacity;
danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
danmu.$ref.innerText = danmu.text;
@@ -230,7 +218,6 @@ export default class Danmuku {
const danmuTop = this.getDanmuTop(danmu.mode);
switch (danmu.mode) {
case 'scroll': {
const danmuLeft = getRect($player, 'width');
danmu.$restWidth = danmuLeft + danmuWidth + 5;
danmu.$ref.style.left = `${danmuLeft}px`;
danmu.$ref.style.top = `${danmuTop}px`;
packages/artplayer-plugin-danmuku/src/effect/index.js
View File
Whitespace-only changes.
packages/artplayer-plugin-danmuku/src/effect/scroll.js
View File
Whitespace-only changes.
packages/artplayer-plugin-danmuku/src/effect/static.js
View File
Whitespace-only changes.
packages/artplayer-plugin-danmuku/src/index.js
-2
View File
@@ -7,8 +7,6 @@ export default function artplayerPluginDanmuku(option) {
name: 'artplayerPluginDanmuku',
emit: danmuku.emit.bind(danmuku),
config: danmuku.config.bind(danmuku),
start: danmuku.start.bind(danmuku),
stop: danmuku.stop.bind(danmuku),
hide: danmuku.hide.bind(danmuku),
show: danmuku.show.bind(danmuku),
};
packages/artplayer-plugin-danmuku/src/utils.js
+29
View File
@@ -5,4 +5,33 @@ export function filter(queue, state, callback) {
export function getRect(ref, key) {
const result = ref.getBoundingClientRect();
return key ? result[key] : result;
}
export function getDanmuRef(queue) {
const result = queue.find(danmu => {
return danmu.$ref && danmu.$state === 'wait';
});
if (result) {
const { $ref } = result;
result.$ref = null;
return $ref;
}
const $ref = document.createElement('div');
$ref.style.cssText = `
user-select: none;
position: absolute;
white-space: pre;
pointer-events: none;
perspective: 500px;
display: inline-block;
will-change: transform;
font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 1.125;
text-shadow: 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;
`;
return $ref;
}