@tarojs/components 3.3.12 → 3.4.0-beta.0

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

@@ -1,3 +1,12 @@
+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 { formatTime } from './utils';
@@ -42,32 +51,40 @@ export class VideoControl {
     this.seekFunc(this.percentage * this.duration);
     this.toggleVisibility(true);
   }
-  async setProgressBall(percentage) {
-    if (this.progressBallRef) {
-      this.progressBallRef.style.left = `${percentage * 100}%`;
-    }
+  setProgressBall(percentage) {
+    return __awaiter(this, void 0, void 0, function* () {
+      if (this.progressBallRef) {
+        this.progressBallRef.style.left = `${percentage * 100}%`;
+      }
+    });
   }
-  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);
+  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.controlsRef.style.visibility = 'visible';
       }
-      this.controlsRef.style.visibility = 'visible';
-    }
-    else {
-      this.controlsRef.style.visibility = 'hidden';
-    }
-    this.visible = !!visible;
+      else {
+        this.controlsRef.style.visibility = 'hidden';
+      }
+      this.visible = !!visible;
+    });
   }
-  async getIsDraggingProgressBall() {
-    return this.isDraggingProgressBall;
+  getIsDraggingProgressBall() {
+    return __awaiter(this, void 0, void 0, function* () {
+      return this.isDraggingProgressBall;
+    });
   }
-  async setCurrentTime(time) {
-    this.currentTimeRef.innerHTML = formatTime(time);
+  setCurrentTime(time) {
+    return __awaiter(this, void 0, void 0, function* () {
+      this.currentTimeRef.innerHTML = formatTime(time);
+    });
   }
   render() {
     const { controls, currentTime, duration, isPlaying, pauseFunc, playFunc, showPlayBtn, showProgress } = this;

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

@@ -1,3 +1,12 @@
+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 {
@@ -17,47 +26,51 @@ export class VideoDanmu {
     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;
+  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))
+        ];
+      }
     });
-    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;
-        });
+  }
+  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;
       });
-    }
-    if (shouldUpdate) {
-      this.danmuList = newDanmuList;
-    }
+      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(() => {

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

@@ -1,3 +1,12 @@
+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, Event, Host, Watch, Listen, Element, Method } from '@stencil/core';
 import classNames from 'classnames';
@@ -141,11 +150,11 @@ export class Video {
       this.controlsRef.toggleVisibility();
       this.onEnded.emit();
     };
-    this.handleTimeUpdate = throttle(async (e) => {
+    this.handleTimeUpdate = throttle((e) => __awaiter(this, void 0, void 0, function* () {
       var _a, _b;
       this.currentTime = this.videoRef.currentTime;
       const duration = this.duration || this._duration;
-      const isControlDragging = await this.controlsRef.getIsDraggingProgressBall();
+      const isControlDragging = yield this.controlsRef.getIsDraggingProgressBall();
       if (this.controls && this.showProgress) {
         if (!isControlDragging && !this.isDraggingProgress) {
           this.controlsRef.setProgressBall(this.currentTime / duration);
@@ -163,7 +172,7 @@ export class Video {
           this.handleEnded();
         }
       }
-    }, 250);
+    }), 250);
     this.handleError = e => {
       var _a, _b;
       this.onError.emit({
@@ -268,29 +277,31 @@ export class Video {
   watchEnableDanmu(newVal) {
     this._enableDanmu = newVal;
   }
-  async onDocumentTouchMove(e) {
-    if (this.lastTouchScreenX === undefined || this.lastTouchScreenY === undefined)
-      return;
-    if (await this.controlsRef.getIsDraggingProgressBall())
-      return;
-    const gestureObj = this.analyseGesture(e);
-    if (gestureObj.type === 'adjustVolume') {
-      this.toastVolumeRef.style.visibility = 'visible';
-      const nextVolume = Math.max(Math.min(this.lastVolume - gestureObj.dataY, 1), 0);
-      this.videoRef.volume = nextVolume;
-      this.toastVolumeBarRef.style.width = `${nextVolume * 100}%`;
-    }
-    else if (gestureObj.type === 'adjustProgress') {
-      this.isDraggingProgress = true;
-      this.nextPercentage = Math.max(Math.min(this.lastPercentage + gestureObj.dataX, 1), 0);
-      if (this.controls && this.showProgress) {
-        this.controlsRef.setProgressBall(this.nextPercentage);
-        this.controlsRef.toggleVisibility(true);
+  onDocumentTouchMove(e) {
+    return __awaiter(this, void 0, void 0, function* () {
+      if (this.lastTouchScreenX === undefined || this.lastTouchScreenY === undefined)
+        return;
+      if (yield this.controlsRef.getIsDraggingProgressBall())
+        return;
+      const gestureObj = this.analyseGesture(e);
+      if (gestureObj.type === 'adjustVolume') {
+        this.toastVolumeRef.style.visibility = 'visible';
+        const nextVolume = Math.max(Math.min(this.lastVolume - gestureObj.dataY, 1), 0);
+        this.videoRef.volume = nextVolume;
+        this.toastVolumeBarRef.style.width = `${nextVolume * 100}%`;
       }
-      const duration = this.duration || this._duration;
-      this.toastProgressTitleRef.innerHTML = `${formatTime(this.nextPercentage * duration)} / ${formatTime(duration)}`;
-      this.toastProgressRef.style.visibility = 'visible';
-    }
+      else if (gestureObj.type === 'adjustProgress') {
+        this.isDraggingProgress = true;
+        this.nextPercentage = Math.max(Math.min(this.lastPercentage + gestureObj.dataX, 1), 0);
+        if (this.controls && this.showProgress) {
+          this.controlsRef.setProgressBall(this.nextPercentage);
+          this.controlsRef.toggleVisibility(true);
+        }
+        const duration = this.duration || this._duration;
+        this.toastProgressTitleRef.innerHTML = `${formatTime(this.nextPercentage * duration)} / ${formatTime(duration)}`;
+        this.toastProgressRef.style.visibility = 'visible';
+      }
+    });
   }
   onDocumentTouchEnd() {
     var _a;
@@ -309,28 +320,40 @@ export class Video {
     this.lastTouchScreenY = undefined;
   }
   /** 播放视频 */
-  async play() {
-    this._play();
+  play() {
+    return __awaiter(this, void 0, void 0, function* () {
+      this._play();
+    });
   }
   /** 暂停视频 */
-  async pause() {
-    this._pause();
+  pause() {
+    return __awaiter(this, void 0, void 0, function* () {
+      this._pause();
+    });
   }
   /** 停止视频 */
-  async stop() {
-    this._stop();
+  stop() {
+    return __awaiter(this, void 0, void 0, function* () {
+      this._stop();
+    });
   }
   /** 跳转到指定位置 */
-  async seek(position) {
-    this._seek(position);
+  seek(position) {
+    return __awaiter(this, void 0, void 0, function* () {
+      this._seek(position);
+    });
   }
   /** 进入全屏。若有自定义内容需在全屏时展示，需将内容节点放置到 video 节点内。 */
-  async requestFullScreen() {
-    this.toggleFullScreen(true);
+  requestFullScreen() {
+    return __awaiter(this, void 0, void 0, function* () {
+      this.toggleFullScreen(true);
+    });
   }
   /** 退出全屏 */
-  async exitFullScreen() {
-    this.toggleFullScreen(false);
+  exitFullScreen() {
+    return __awaiter(this, void 0, void 0, function* () {
+      this.toggleFullScreen(false);
+    });
   }
   render() {
     const { src, controls, autoplay, loop, muted, poster, objectFit, isFirst, isMute, isFullScreen, duration, _duration, showCenterPlayBtn, isPlaying, _enableDanmu, showMuteBtn, danmuBtn, showFullscreenBtn, nativeProps } = this;

package/dist/collection/components/view/view.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, Prop, h, Host, Listen, State, Event } from '@stencil/core';
+import { Component, Prop, h, Host, Listen, State, Event, Element } from '@stencil/core';
 import classNames from 'classnames';
 export class View {
   constructor() {
@@ -40,6 +40,13 @@ export class View {
       }, this.hoverStayTime);
     }
   }
+  componentDidRender() {
+    const el = this.el;
+    el.childNodes.forEach(item => {
+      if (item.nodeType === document.COMMENT_NODE)
+        el.removeChild(item);
+    });
+  }
   render() {
     const cls = classNames({
       [`${this.hoverClass}`]: this.hover
@@ -151,6 +158,7 @@ export class View {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "el"; }
   static get listeners() { return [{
       "name": "touchstart",
       "method": "onTouchStart",

package/dist/esm/{index-ff1b322a.js → index-3c78bcaf.js}

@@ -58,7 +58,7 @@ var classnames = createCommonjsModule(function (module) {
 		return classes.join(' ');
 	}
 
-	if ( module.exports) {
+	if (module.exports) {
 		classNames.default = classNames;
 		module.exports = classNames;
 	} else {