Skip to content
Permalink
Browse files

fix danmaku showing bug and small ui probelm on live mode

  • Loading branch information...
DIYgod committed Dec 15, 2017
1 parent 3222aa5 commit 4c587e58295d28d45b0107fff1639062076c7cd6
Showing with 120 additions and 101 deletions.
  1. +18 −1 src/DPlayer.scss
  2. +102 −100 src/danmaku.js
@@ -754,7 +754,7 @@

.dplayer-volume-bar-wrap {
display: inline-block;
margin: 0 5px 0 -5px;
margin: 0 10px 0 -5px;
vertical-align: middle;
height: 100%;

@@ -814,6 +814,14 @@
overflow: hidden;
z-index: 2;

& > div {
display: none;

&.dplayer-setting-origin-panel {
display: block;
}
}

&.dplayer-setting-box-open {
transform: scale(1);
}
@@ -823,6 +831,15 @@
height: 180px;
text-align: center;
}

&.dplayer-setting-box-speed {
.dplayer-setting-origin-panel {
display: none;
}
.dplayer-setting-speed-panel {
display: block;
}
}
}

.dplayer-setting-item,
@@ -141,122 +141,124 @@ class Danmaku {
* type - danmaku type, `right` `top` `bottom`, default: `right`
*/
draw (dan) {
const itemHeight = this.options.height;
const danWidth = this.container.offsetWidth;
const danHeight = this.container.offsetHeight;
const itemY = parseInt(danHeight / itemHeight);

const danItemRight = (ele) => {
const eleWidth = ele.offsetWidth || parseInt(ele.style.width);
const eleRight = ele.getBoundingClientRect().right || this.container.getBoundingClientRect().right + eleWidth;
return this.container.getBoundingClientRect().right - eleRight;
};

const danSpeed = (width) => (danWidth + width) / 5;

const getTunnel = (ele, type, width) => {
const tmp = danWidth / danSpeed(width);

for (let i = 0; this.unlimited || i < itemY; i++) {
const item = this.danTunnel[type][i + ''];
if (item && item.length) {
if (type !== 'right') {
continue;
}
for (let j = 0; j < item.length; j++) {
const danRight = danItemRight(item[j]) - 10;
if (danRight <= danWidth - tmp * danSpeed(parseInt(item[j].style.width)) || danRight <= 0) {
break;
if (this.showing) {
const itemHeight = this.options.height;
const danWidth = this.container.offsetWidth;
const danHeight = this.container.offsetHeight;
const itemY = parseInt(danHeight / itemHeight);

const danItemRight = (ele) => {
const eleWidth = ele.offsetWidth || parseInt(ele.style.width);
const eleRight = ele.getBoundingClientRect().right || this.container.getBoundingClientRect().right + eleWidth;
return this.container.getBoundingClientRect().right - eleRight;
};

const danSpeed = (width) => (danWidth + width) / 5;

const getTunnel = (ele, type, width) => {
const tmp = danWidth / danSpeed(width);

for (let i = 0; this.unlimited || i < itemY; i++) {
const item = this.danTunnel[type][i + ''];
if (item && item.length) {
if (type !== 'right') {
continue;
}
if (j === item.length - 1) {
this.danTunnel[type][i + ''].push(ele);
ele.addEventListener('animationend', () => {
this.danTunnel[type][i + ''].splice(0, 1);
});
return i % itemY;
for (let j = 0; j < item.length; j++) {
const danRight = danItemRight(item[j]) - 10;
if (danRight <= danWidth - tmp * danSpeed(parseInt(item[j].style.width)) || danRight <= 0) {
break;
}
if (j === item.length - 1) {
this.danTunnel[type][i + ''].push(ele);
ele.addEventListener('animationend', () => {
this.danTunnel[type][i + ''].splice(0, 1);
});
return i % itemY;
}
}
}
else {
this.danTunnel[type][i + ''] = [ele];
ele.addEventListener('animationend', () => {
this.danTunnel[type][i + ''].splice(0, 1);
});
return i % itemY;
}
}
else {
this.danTunnel[type][i + ''] = [ele];
ele.addEventListener('animationend', () => {
this.danTunnel[type][i + ''].splice(0, 1);
});
return i % itemY;
}
}
return -1;
};

if (Object.prototype.toString.call(dan) !== '[object Array]') {
dan = [dan];
}

const docFragment = document.createDocumentFragment();
return -1;
};

for (let i = 0; i < dan.length; i++) {
if (!dan[i].type) {
dan[i].type = 'right';
}
if (!dan[i].color) {
dan[i].color = '#fff';
}
const item = document.createElement(`div`);
item.classList.add(`dplayer-danmaku-item`);
item.classList.add(`dplayer-danmaku-${dan[i].type}`);
if (dan[i].border) {
item.innerHTML = `<span style="border:${dan[i].border}">${dan[i].text}</span>`;
}
else {
item.innerHTML = dan[i].text;
if (Object.prototype.toString.call(dan) !== '[object Array]') {
dan = [dan];
}
item.style.opacity = this._opacity;
item.style.color = dan[i].color;
item.addEventListener('animationend', () => {
this.container.removeChild(item);
});

const itemWidth = this._measure(dan[i].text);
let tunnel;
const docFragment = document.createDocumentFragment();

// adjust
switch (dan[i].type) {
case 'right':
tunnel = getTunnel(item, dan[i].type, itemWidth);
if (tunnel >= 0) {
item.style.width = itemWidth + 1 + 'px';
item.style.top = itemHeight * tunnel + 'px';
item.style.transform = `translateX(-${danWidth}px)`;
for (let i = 0; i < dan.length; i++) {
if (!dan[i].type) {
dan[i].type = 'right';
}
break;
case 'top':
tunnel = getTunnel(item, dan[i].type);
if (tunnel >= 0) {
item.style.top = itemHeight * tunnel + 'px';
if (!dan[i].color) {
dan[i].color = '#fff';
}
break;
case 'bottom':
tunnel = getTunnel(item, dan[i].type);
if (tunnel >= 0) {
item.style.bottom = itemHeight * tunnel + 'px';
const item = document.createElement(`div`);
item.classList.add(`dplayer-danmaku-item`);
item.classList.add(`dplayer-danmaku-${dan[i].type}`);
if (dan[i].border) {
item.innerHTML = `<span style="border:${dan[i].border}">${dan[i].text}</span>`;
}
else {
item.innerHTML = dan[i].text;
}
item.style.opacity = this._opacity;
item.style.color = dan[i].color;
item.addEventListener('animationend', () => {
this.container.removeChild(item);
});

const itemWidth = this._measure(dan[i].text);
let tunnel;

// adjust
switch (dan[i].type) {
case 'right':
tunnel = getTunnel(item, dan[i].type, itemWidth);
if (tunnel >= 0) {
item.style.width = itemWidth + 1 + 'px';
item.style.top = itemHeight * tunnel + 'px';
item.style.transform = `translateX(-${danWidth}px)`;
}
break;
case 'top':
tunnel = getTunnel(item, dan[i].type);
if (tunnel >= 0) {
item.style.top = itemHeight * tunnel + 'px';
}
break;
case 'bottom':
tunnel = getTunnel(item, dan[i].type);
if (tunnel >= 0) {
item.style.bottom = itemHeight * tunnel + 'px';
}
break;
default:
console.error(`Can't handled danmaku type: ${dan[i].type}`);
}
break;
default:
console.error(`Can't handled danmaku type: ${dan[i].type}`);
}

if (tunnel >= 0) {
// move
item.classList.add(`dplayer-danmaku-move`);
if (tunnel >= 0) {
// move
item.classList.add(`dplayer-danmaku-move`);

// insert
docFragment.appendChild(item);
// insert
docFragment.appendChild(item);
}
}
}

this.container.appendChild(docFragment);
this.container.appendChild(docFragment);

return docFragment;
return docFragment;
}
}

play () {

0 comments on commit 4c587e5

Please sign in to comment.
You can’t perform that action at this time.