@tarojs/components 3.5.7-alpha.6 → 3.6.0-canary.0

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

@@ -1,14 +1,4 @@
-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, Host, Element, Listen, Method } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { formatTime } from './utils';
 export class VideoControl {
   constructor() {
@@ -35,6 +25,15 @@ export class VideoControl {
       this.seekFunc(percentage * this.duration);
       this.toggleVisibility(true);
     };
+    this.controls = undefined;
+    this.currentTime = undefined;
+    this.duration = undefined;
+    this.isPlaying = undefined;
+    this.pauseFunc = undefined;
+    this.playFunc = undefined;
+    this.seekFunc = undefined;
+    this.showPlayBtn = undefined;
+    this.showProgress = undefined;
   }
   onDocumentTouchMove(e) {
     if (!this.isDraggingProgressBall)
@@ -51,40 +50,32 @@ export class VideoControl {
     this.seekFunc(this.percentage * this.duration);
     this.toggleVisibility(true);
   }
-  setProgressBall(percentage) {
-    return __awaiter(this, void 0, void 0, function* () {
-      if (this.progressBallRef) {
-        this.progressBallRef.style.left = `${percentage * 100}%`;
-      }
-    });
+  async setProgressBall(percentage) {
+    if (this.progressBallRef) {
+      this.progressBallRef.style.left = `${percentage * 100}%`;
+    }
   }
-  toggleVisibility(nextVisible) {
-    return __awaiter(this, void 0, void 0, function* () {
-      const visible = nextVisible === undefined ? !this.visible : nextVisible;
-      if (visible) {
-        this.hideControlsTimer && clearTimeout(this.hideControlsTimer);
-        if (this.isPlaying) {
-          this.hideControlsTimer = setTimeout(() => {
-            this.toggleVisibility(false);
-          }, 2000);
-        }
-        this.el.style.visibility = 'visible';
-      }
-      else {
-        this.el.style.visibility = 'hidden';
+  async toggleVisibility(nextVisible) {
+    const visible = nextVisible === undefined ? !this.visible : nextVisible;
+    if (visible) {
+      this.hideControlsTimer && clearTimeout(this.hideControlsTimer);
+      if (this.isPlaying) {
+        this.hideControlsTimer = setTimeout(() => {
+          this.toggleVisibility(false);
+        }, 2000);
       }
-      this.visible = !!visible;
-    });
+      this.el.style.visibility = 'visible';
+    }
+    else {
+      this.el.style.visibility = 'hidden';
+    }
+    this.visible = !!visible;
   }
-  getIsDraggingProgressBall() {
-    return __awaiter(this, void 0, void 0, function* () {
-      return this.isDraggingProgressBall;
-    });
+  async getIsDraggingProgressBall() {
+    return this.isDraggingProgressBall;
   }
-  setCurrentTime(time) {
-    return __awaiter(this, void 0, void 0, function* () {
-      this.currentTimeRef.innerHTML = formatTime(time);
-    });
+  async setCurrentTime(time) {
+    this.currentTimeRef.innerHTML = formatTime(time);
   }
   render() {
     const { controls, currentTime, duration, isPlaying, pauseFunc, playFunc, showPlayBtn, showProgress } = this;
@@ -99,269 +90,266 @@ export class VideoControl {
     else {
       playBtn = h("div", { class: 'taro-video-control-button taro-video-control-button-play', onClick: playFunc });
     }
-    return (h(Host, { class: 'taro-video-bar taro-video-bar-full' },
-      controls && (h("div", { class: 'taro-video-controls' },
-        playBtn,
-        showProgress && (h("div", { class: 'taro-video-current-time', ref: dom => (this.currentTimeRef = dom) }, formatTime(currentTime))),
-        showProgress && (h("div", { class: 'taro-video-progress-container', onClick: this.onClickProgress },
-          h("div", { class: 'taro-video-progress', ref: ref => {
-              if (!ref)
-                return;
-              const rect = ref.getBoundingClientRect();
-              this.progressDimensions.left = rect.left;
-              this.progressDimensions.width = rect.width;
-            } },
-            h("div", { class: 'taro-video-progress-buffered', style: { width: '100%' } }),
-            h("div", { class: 'taro-video-ball', ref: dom => (this.progressBallRef = dom), onTouchStart: this.onDragProgressBallStart, style: {
-                left: `${formattedDuration ? (this.currentTime / duration) * 100 : 0}%`
-              } },
-              h("div", { class: 'taro-video-inner' }))))),
-        showProgress && h("div", { class: 'taro-video-duration' }, formattedDuration))),
-      h("slot", null)));
+    return (h(Host, { class: 'taro-video-bar taro-video-bar-full' }, controls && (h("div", { class: 'taro-video-controls' }, playBtn, showProgress && (h("div", { class: 'taro-video-current-time', ref: dom => (this.currentTimeRef = dom) }, formatTime(currentTime))), showProgress && (h("div", { class: 'taro-video-progress-container', onClick: this.onClickProgress }, h("div", { class: 'taro-video-progress', ref: ref => {
+        if (!ref)
+          return;
+        const rect = ref.getBoundingClientRect();
+        this.progressDimensions.left = rect.left;
+        this.progressDimensions.width = rect.width;
+      } }, h("div", { class: 'taro-video-progress-buffered', style: { width: '100%' } }), h("div", { class: 'taro-video-ball', ref: dom => (this.progressBallRef = dom), onTouchStart: this.onDragProgressBallStart, style: {
+        left: `${formattedDuration ? (this.currentTime / duration) * 100 : 0}%`
+      } }, h("div", { class: 'taro-video-inner' }))))), showProgress && h("div", { class: 'taro-video-duration' }, formattedDuration))), h("slot", null)));
   }
   static get is() { return "taro-video-control"; }
-  static get properties() { return {
-    "controls": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "controls",
-      "reflect": false
-    },
-    "currentTime": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "current-time",
-      "reflect": false
-    },
-    "duration": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "duration",
-      "reflect": false
-    },
-    "isPlaying": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-playing",
-      "reflect": false
-    },
-    "pauseFunc": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "() => void",
-        "resolved": "() => void",
-        "references": {}
+  static get properties() {
+    return {
+      "controls": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "controls",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "playFunc": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "() => void",
-        "resolved": "() => void",
-        "references": {}
+      "currentTime": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "current-time",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "seekFunc": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(position: number) => void",
-        "resolved": "(position: number) => void",
-        "references": {}
+      "duration": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "duration",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "showPlayBtn": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "isPlaying": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-playing",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "pauseFunc": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "attribute": "show-play-btn",
-      "reflect": false
-    },
-    "showProgress": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "playFunc": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "seekFunc": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(position: number) => void",
+          "resolved": "(position: number) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "attribute": "show-progress",
-      "reflect": false
-    }
-  }; }
-  static get methods() { return {
-    "setProgressBall": {
-      "complexType": {
-        "signature": "(percentage: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "showPlayBtn": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
+        "attribute": "show-play-btn",
+        "reflect": false
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "showProgress": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-progress",
+        "reflect": false
       }
-    },
-    "toggleVisibility": {
-      "complexType": {
-        "signature": "(nextVisible?: boolean | undefined) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get methods() {
+    return {
+      "setProgressBall": {
+        "complexType": {
+          "signature": "(percentage: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getIsDraggingProgressBall": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "toggleVisibility": {
+        "complexType": {
+          "signature": "(nextVisible?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setCurrentTime": {
-      "complexType": {
-        "signature": "(time: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "getIsDraggingProgressBall": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "setCurrentTime": {
+        "complexType": {
+          "signature": "(time: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "touchmove",
-      "method": "onDocumentTouchMove",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "touchend",
-      "method": "onDocumentTouchEnd",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "touchcancel",
-      "method": "onDocumentTouchEnd",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "touchmove",
+        "method": "onDocumentTouchMove",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchend",
+        "method": "onDocumentTouchEnd",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchcancel",
+        "method": "onDocumentTouchEnd",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }
+//# sourceMappingURL=video-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video-control.js","sourceRoot":"","sources":["../../../src/components/video/video-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, ComponentInterface, Prop, Host, Element, Listen, Method } from '@stencil/core'\nimport { formatTime } from './utils'\n\n@Component({\n  tag: 'taro-video-control'\n})\nexport class VideoControl implements ComponentInterface {\n  private currentTimeRef: HTMLDivElement\n  private progressBallRef: HTMLDivElement\n  private visible = false\n  private isDraggingProgressBall = false\n  private hideControlsTimer: ReturnType<typeof setTimeout>\n  private percentage = 0\n  private progressDimensions = {\n    left: 0,\n    width: 0\n  }\n\n  @Element() el: HTMLElement\n\n  @Prop() controls: boolean\n  @Prop() currentTime: number\n  @Prop() duration: number\n  @Prop() isPlaying: boolean\n  @Prop() pauseFunc: () => void\n  @Prop() playFunc: () => void\n  @Prop() seekFunc: (position: number) => void\n  @Prop() showPlayBtn: boolean\n  @Prop() showProgress: boolean\n\n  @Listen('touchmove', {\n    target: 'document'\n  })\n  onDocumentTouchMove (e: TouchEvent) {\n    if (!this.isDraggingProgressBall) return\n    const touchX = e.touches[0].pageX\n    this.percentage = this.calcPercentage(touchX)\n    this.setProgressBall(this.percentage)\n    this.setCurrentTime(this.percentage * this.duration)\n  }\n\n  @Listen('touchend', {\n    target: 'document'\n  })\n  @Listen('touchcancel', {\n    target: 'document'\n  })\n  onDocumentTouchEnd () {\n    if (!this.isDraggingProgressBall) return\n\n    this.isDraggingProgressBall = false\n    this.seekFunc(this.percentage * this.duration)\n    this.toggleVisibility(true)\n  }\n\n  @Method()\n  async setProgressBall (percentage: number) {\n    if (this.progressBallRef) {\n      this.progressBallRef.style.left = `${percentage * 100}%`\n    }\n  }\n\n  @Method()\n  async toggleVisibility (nextVisible?: boolean) {\n    const visible = nextVisible === undefined ? !this.visible : nextVisible\n    if (visible) {\n      this.hideControlsTimer && clearTimeout(this.hideControlsTimer)\n      if (this.isPlaying) {\n        this.hideControlsTimer = setTimeout(() => {\n          this.toggleVisibility(false)\n        }, 2000)\n      }\n      this.el.style.visibility = 'visible'\n    } else {\n      this.el.style.visibility = 'hidden'\n    }\n    this.visible = !!visible\n  }\n\n  @Method()\n  async getIsDraggingProgressBall () {\n    return this.isDraggingProgressBall\n  }\n\n  @Method()\n  async setCurrentTime (time: number) {\n    this.currentTimeRef.innerHTML = formatTime(time)\n  }\n\n  calcPercentage = (pageX: number): number => {\n    let pos = pageX - this.progressDimensions.left\n    pos = Math.max(pos, 0)\n    pos = Math.min(pos, this.progressDimensions.width)\n    return pos / this.progressDimensions.width\n  }\n\n  onDragProgressBallStart = () => {\n    this.isDraggingProgressBall = true\n    this.hideControlsTimer && clearTimeout(this.hideControlsTimer)\n  }\n\n  onClickProgress = (e: MouseEvent) => {\n    e.stopPropagation()\n\n    const percentage = this.calcPercentage(e.pageX)\n    this.seekFunc(percentage * this.duration)\n    this.toggleVisibility(true)\n  }\n\n  render () {\n    const {\n      controls,\n      currentTime,\n      duration,\n      isPlaying,\n      pauseFunc,\n      playFunc,\n      showPlayBtn,\n      showProgress\n    } = this\n\n    const formattedDuration = formatTime(duration)\n    let playBtn\n\n    if (!showPlayBtn) {\n      playBtn = null\n    } else if (isPlaying) {\n      playBtn = <div class='taro-video-control-button taro-video-control-button-pause' onClick={pauseFunc} />\n    } else {\n      playBtn = <div class='taro-video-control-button taro-video-control-button-play' onClick={playFunc} />\n    }\n\n    return (\n      <Host class='taro-video-bar taro-video-bar-full'>\n        {controls && (\n          <div class='taro-video-controls'>\n            {playBtn}\n            {showProgress && (\n              <div class='taro-video-current-time' ref={dom => (this.currentTimeRef = dom as HTMLDivElement)}>\n                {formatTime(currentTime)}\n              </div>\n            )}\n            {showProgress && (\n              <div class='taro-video-progress-container' onClick={this.onClickProgress}>\n                <div\n                  class='taro-video-progress'\n                  ref={ref => {\n                    if (!ref) return\n                    const rect = ref.getBoundingClientRect()\n                    this.progressDimensions.left = rect.left\n                    this.progressDimensions.width = rect.width\n                  }}>\n                  <div class='taro-video-progress-buffered' style={{ width: '100%' }} />\n                  <div\n                    class='taro-video-ball'\n                    ref={dom => (this.progressBallRef = dom as HTMLDivElement)}\n                    onTouchStart={this.onDragProgressBallStart}\n                    style={{\n                      left: `${formattedDuration ? (this.currentTime / duration) * 100 : 0}%`\n                    }}\n                  >\n                    <div class='taro-video-inner' />\n                  </div>\n                </div>\n              </div>\n            )}\n            {showProgress && <div class='taro-video-duration'>{formattedDuration}</div>}\n          </div>\n        )}\n        <slot />\n      </Host>\n    )\n  }\n}\n"]}