@tarojs/components 3.5.10 → 3.6.0-alpha.0

package/dist/collection/components/video/video-danmu.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Prop, State, Host, Method } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class VideoDanmu {
   constructor() {
     this.list = [];
@@ -84,73 +83,80 @@ export class VideoDanmu {
       } }, 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"
-          }
+  static get properties() {
+    return {
+      "enable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "enable",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    },
-    "tick": {
-      "complexType": {
-        "signature": "(currentTime: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  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>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "tick": {
+        "complexType": {
+          "signature": "(currentTime: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
 }
+//# sourceMappingURL=video-danmu.js.map

package/dist/collection/components/video/video-danmu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-danmu.js","sourceRoot":"","sources":["../../../src/components/video/video-danmu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, ComponentInterface, Prop, State, Host, Method } from '@stencil/core'\n\nexport interface Danmu {\n  text: string\n  color: string\n  time: number,\n  key: number,\n  bottom: string\n}\n\n@Component({\n  tag: 'taro-video-danmu'\n})\nexport class VideoDanmu implements ComponentInterface {\n  private list: Danmu[] = []\n  private danmuElList: HTMLParagraphElement[] = []\n  private currentTime = 0\n\n  @Prop() enable = false\n\n  @State() danmuList: Danmu[] = []\n\n  ensureProperties (danmu: Partial<Danmu>): Danmu {\n    const clonedDanmu = { ...danmu } as Danmu\n    if (!('time' in danmu)) {\n      clonedDanmu.time = this.currentTime\n    }\n    clonedDanmu.key = Math.random()\n    clonedDanmu.bottom = `${Math.random() * 90 + 5}%`\n    return clonedDanmu\n  }\n\n  @Method()\n  async sendDanmu (danmuList: Partial<Danmu> | Partial<Danmu>[] = []) {\n    if (Array.isArray(danmuList)) {\n      this.list = [\n        ...this.list,\n        ...danmuList.map(danmu => this.ensureProperties(danmu))\n      ]\n    } else {\n      const danmu = danmuList\n      this.list = [\n        ...this.list,\n        { ...this.ensureProperties(danmu) }\n      ]\n    }\n  }\n\n  @Method()\n  async tick (currentTime: number) {\n    this.currentTime = currentTime\n\n    if (!this.enable) return\n\n    const danmuList = this.list\n\n    /**\n     * @todo 这个判断对拖拽进度的处理不严谨\n     */\n    const newDanmuList = danmuList.filter(({ time }) => {\n      return currentTime - time < 4 && currentTime > time\n    })\n    let shouldUpdate = false\n    const oldDanmuList = this.danmuList\n\n    if (newDanmuList.length !== oldDanmuList.length) {\n      shouldUpdate = true\n    } else {\n      shouldUpdate = newDanmuList.some(({ key }) => {\n        return oldDanmuList.every((danmu) => {\n          return key !== danmu.key\n        })\n      })\n    }\n    if (shouldUpdate) {\n      this.danmuList = newDanmuList\n    }\n  }\n\n  componentDidUpdate () {\n    requestAnimationFrame(() => {\n      setTimeout(() => {\n        const danmuElList = this.danmuElList.splice(0)\n        danmuElList.forEach(danmu => {\n          danmu.style.left = '0'\n          danmu.style.webkitTransform = 'translateX(-100%)'\n          danmu.style.transform = 'translateX(-100%)'\n        })\n      })\n    })\n  }\n\n  render () {\n    if (!this.enable) return ''\n\n    return (\n      <Host class='taro-video-danmu'>\n        {this.danmuList.map(({ text, color, bottom, key }) => (\n          <p\n            class='taro-video-danmu-item'\n            key={key}\n            style={{\n              color,\n              bottom\n            }}\n            ref={ref => {\n              if (ref) {\n                this.danmuElList.push(ref)\n              }\n            }}\n          >\n            {text}\n          </p>\n        ))}\n      </Host>\n    )\n  }\n}\n"]}