@tarojs/components
Version:
162 lines (161 loc) • 4.01 kB
JavaScript
import { h, Host } from '@stencil/core';
export class VideoDanmu {
constructor() {
this.list = [];
this.danmuElList = [];
this.currentTime = 0;
this.enable = false;
this.danmuList = [];
}
ensureProperties(danmu) {
const clonedDanmu = Object.assign({}, danmu);
if (!('time' in danmu)) {
clonedDanmu.time = this.currentTime;
}
clonedDanmu.key = Math.random();
clonedDanmu.bottom = `${Math.random() * 90 + 5}%`;
return clonedDanmu;
}
async sendDanmu(danmuList = []) {
if (Array.isArray(danmuList)) {
this.list = [
...this.list,
...danmuList.map(danmu => this.ensureProperties(danmu))
];
}
else {
const danmu = danmuList;
this.list = [
...this.list,
Object.assign({}, this.ensureProperties(danmu))
];
}
}
async tick(currentTime) {
this.currentTime = currentTime;
if (!this.enable)
return;
const danmuList = this.list;
/**
* @todo 这个判断对拖拽进度的处理不严谨
*/
const newDanmuList = danmuList.filter(({ time }) => {
return currentTime - time < 4 && currentTime > time;
});
let shouldUpdate = false;
const oldDanmuList = this.danmuList;
if (newDanmuList.length !== oldDanmuList.length) {
shouldUpdate = true;
}
else {
shouldUpdate = newDanmuList.some(({ key }) => {
return oldDanmuList.every((danmu) => {
return key !== danmu.key;
});
});
}
if (shouldUpdate) {
this.danmuList = newDanmuList;
}
}
componentDidUpdate() {
requestAnimationFrame(() => {
setTimeout(() => {
const danmuElList = this.danmuElList.splice(0);
danmuElList.forEach(danmu => {
danmu.style.left = '0';
danmu.style.webkitTransform = 'translateX(-100%)';
danmu.style.transform = 'translateX(-100%)';
});
});
});
}
render() {
if (!this.enable)
return '';
return (h(Host, { class: 'taro-video-danmu' }, this.danmuList.map(({ text, color, bottom, key }) => (h("p", { class: 'taro-video-danmu-item', key: key, style: {
color,
bottom
}, ref: ref => {
if (ref) {
this.danmuElList.push(ref);
}
} }, text)))));
}
static get is() { return "taro-video-danmu"; }
static get properties() {
return {
"enable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "enable",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"danmuList": {}
};
}
static get methods() {
return {
"sendDanmu": {
"complexType": {
"signature": "(danmuList?: Partial<Danmu> | Partial<Danmu>[]) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
},
"Partial": {
"location": "global"
},
"Danmu": {
"location": "local"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"tick": {
"complexType": {
"signature": "(currentTime: number) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
}