@tarojs/components
Version:
Taro 组件库。
170 lines (169 loc) • 4.81 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, h, Prop, State, Host, Method } 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;
}
sendDanmu(danmuList = []) {
return __awaiter(this, void 0, void 0, function* () {
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))
];
}
});
}
tick(currentTime) {
return __awaiter(this, void 0, void 0, function* () {
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": []
}
}
}; }
}