@tarojs/components 3.6.0-canary.9 → 3.6.0

package/dist/components/taro-view-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TaroViewCore extends Components.TaroViewCore, HTMLElement {}
+export const TaroViewCore: {
+  prototype: TaroViewCore;
+  new (): TaroViewCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/taro-view-core.js

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const indexCss = "body,html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}taro-view-core{display:block}";
+
+const View = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.onLongPress = createEvent(this, "longpress", 7);
+    this.startTime = 0;
+    this.animation = undefined;
+    this.hoverClass = undefined;
+    this.hoverStartTime = 50;
+    this.hoverStayTime = 400;
+    this.hover = false;
+    this.touch = false;
+  }
+  onTouchStart() {
+    if (this.hoverClass) {
+      this.touch = true;
+      setTimeout(() => {
+        if (this.touch) {
+          this.hover = true;
+        }
+      }, this.hoverStartTime);
+    }
+    this.timeoutEvent = setTimeout(() => {
+      this.onLongPress.emit();
+    }, 350);
+    this.startTime = Date.now();
+  }
+  onTouchMove() {
+    clearTimeout(this.timeoutEvent);
+  }
+  onTouchEnd() {
+    const spanTime = Date.now() - this.startTime;
+    if (spanTime < 350) {
+      clearTimeout(this.timeoutEvent);
+    }
+    if (this.hoverClass) {
+      this.touch = false;
+      setTimeout(() => {
+        if (!this.touch) {
+          this.hover = false;
+        }
+      }, this.hoverStayTime);
+    }
+  }
+  componentDidRender() {
+    const el = this.el;
+    el.childNodes.forEach(item => {
+      // Note: ['s-cn'] Content Reference Node
+      if (item.nodeType === document.COMMENT_NODE && item['s-cn'])
+        item['s-cn'] = false;
+      // Note: ['s-sr'] Is a slot reference node (渲染完成后禁用 slotRelocation 特性, 避免 Stencil 组件相互调用时内置排序与第三方 UI 框架冲突导致组件顺序混乱)
+      if (item.nodeType !== document.COMMENT_NODE && item['s-sr'])
+        item['s-sr'] = false;
+    });
+  }
+  render() {
+    const cls = classnames({
+      [`${this.hoverClass}`]: this.hover
+    });
+    let attr = {};
+    if (!!this.animation) {
+      attr['animation'] = this.animation;
+      attr['data-animation'] = this.animation;
+    }
+    return (h(Host, Object.assign({ class: cls }, attr), h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return indexCss; }
+}, [4, "taro-view-core", {
+    "animation": [1],
+    "hoverClass": [1, "hover-class"],
+    "hoverStartTime": [2, "hover-start-time"],
+    "hoverStayTime": [2, "hover-stay-time"],
+    "hover": [32],
+    "touch": [32]
+  }, [[1, "touchstart", "onTouchStart"], [1, "touchmove", "onTouchMove"], [1, "touchend", "onTouchEnd"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-view-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-view-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, View);
+      }
+      break;
+  } });
+}
+
+const TaroViewCore = View;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaroViewCore, defineCustomElement };
+
+//# sourceMappingURL=taro-view-core.js.map

package/dist/components/taro-view-core.js.map

@@ -0,0 +1 @@
+{"file":"taro-view-core.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,2KAA2K;;MCO/K,IAAI;;;;;IAeP,cAAS,GAAG,CAAC,CAAA;;;0BAVI,EAAE;yBACH,GAAG;iBACV,KAAK;iBACL,KAAK;;EAUtB,YAAY;IACV,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;MACjB,UAAU,CAAC;QACT,IAAI,IAAI,CAAC,KAAK,EAAE;UACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;SAClB;OACF,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;KACxB;IAED,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;MAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;KACxB,EAAE,GAAG,CAAC,CAAA;IACP,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;GAC5B;EAGD,WAAW;IACT,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;GAChC;EAGD,UAAU;IACR,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAA;IAC5C,IAAI,QAAQ,GAAG,GAAG,EAAE;MAClB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;KAChC;IACD,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;MAClB,UAAU,CAAC;QACT,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;UACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;SACnB;OACF,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;KACvB;GACF;EAED,kBAAkB;IAChB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAA;IAClB,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;;MAExB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC;QAAE,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAA;;MAEjF,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC;QAAE,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAA;KAClF,CAAC,CAAA;GACH;EAED,MAAM;IACJ,MAAM,GAAG,GAAGA,UAAU,CAAC;MACrB,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK;KACnC,CAAC,CAAA;IACF,IAAI,IAAI,GAAG,EAAE,CAAA;IACb,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,SAAS,CAAA;MAClC,IAAI,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,SAAS,CAAA;KACxC;IACD,QACE,EAAC,IAAI,kBAAC,KAAK,EAAE,GAAG,IAAM,IAAI,GACxB,eAAa,CACR,EACR;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["classNames"],"sources":["./src/components/view/style/index.scss?tag=taro-view-core","./src/components/view/view.tsx"],"sourcesContent":["body,\nhtml {\n  user-select: none;\n  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);\n}\n\ntaro-view-core {\n  display: block;\n}\n","import { Component, Prop, h, ComponentInterface, Host, Listen, State, Event, EventEmitter, Element } from '@stencil/core'\nimport classNames from 'classnames'\n\n@Component({\n  tag: 'taro-view-core',\n  styleUrl: './style/index.scss'\n})\nexport class View implements ComponentInterface {\n  @Element() el: HTMLElement\n\n  @Prop() animation: string\n  @Prop() hoverClass: string\n  @Prop() hoverStartTime = 50\n  @Prop() hoverStayTime = 400\n  @State() hover = false\n  @State() touch = false\n\n  @Event({\n    eventName: 'longpress'\n  }) onLongPress: EventEmitter\n\n  private timeoutEvent: ReturnType<typeof setTimeout>\n  private startTime = 0\n\n  @Listen('touchstart')\n  onTouchStart () {\n    if (this.hoverClass) {\n      this.touch = true\n      setTimeout(() => {\n        if (this.touch) {\n          this.hover = true\n        }\n      }, this.hoverStartTime)\n    }\n\n    this.timeoutEvent = setTimeout(() => {\n      this.onLongPress.emit()\n    }, 350)\n    this.startTime = Date.now()\n  }\n\n  @Listen('touchmove')\n  onTouchMove () {\n    clearTimeout(this.timeoutEvent)\n  }\n\n  @Listen('touchend')\n  onTouchEnd () {\n    const spanTime = Date.now() - this.startTime\n    if (spanTime < 350) {\n      clearTimeout(this.timeoutEvent)\n    }\n    if (this.hoverClass) {\n      this.touch = false\n      setTimeout(() => {\n        if (!this.touch) {\n          this.hover = false\n        }\n      }, this.hoverStayTime)\n    }\n  }\n\n  componentDidRender () {\n    const el = this.el\n    el.childNodes.forEach(item => {\n      // Note: ['s-cn'] Content Reference Node\n      if (item.nodeType === document.COMMENT_NODE && item['s-cn']) item['s-cn'] = false\n      // Note: ['s-sr'] Is a slot reference node (渲染完成后禁用 slotRelocation 特性, 避免 Stencil 组件相互调用时内置排序与第三方 UI 框架冲突导致组件顺序混乱)\n      if (item.nodeType !== document.COMMENT_NODE && item['s-sr']) item['s-sr'] = false\n    })\n  }\n\n  render() {\n    const cls = classNames({\n      [`${this.hoverClass}`]: this.hover\n    })\n    let attr = {}\n    if (!!this.animation) {\n      attr['animation'] = this.animation\n      attr['data-animation'] = this.animation\n    }\n    return (\n      <Host class={cls} {...attr}>\n        <slot></slot>\n      </Host>\n    )\n  }\n}\n"],"version":3}

package/dist/components/taro-voip-room-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TaroVoipRoomCore extends Components.TaroVoipRoomCore, HTMLElement {}
+export const TaroVoipRoomCore: {
+  prototype: TaroVoipRoomCore;
+  new (): TaroVoipRoomCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/taro-voip-room-core.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { n as notSupport } from './helper.js';
+
+const VoipRoom = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidLoad() {
+    notSupport('VoipRoom', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+}, [0, "taro-voip-room-core"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-voip-room-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-voip-room-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VoipRoom);
+      }
+      break;
+  } });
+}
+
+const TaroVoipRoomCore = VoipRoom;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaroVoipRoomCore, defineCustomElement };
+
+//# sourceMappingURL=taro-voip-room-core.js.map

package/dist/components/taro-voip-room-core.js.map

@@ -0,0 +1 @@
+{"file":"taro-voip-room-core.js","mappings":";;;MAOa,QAAQ;;;;;EACnB,gBAAgB;IACd,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;GAC7B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,OAAG,EACT;GACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/voip-room/voip-room.tsx"],"sourcesContent":["import { Component, ComponentInterface, h, Host } from '@stencil/core'\n\nimport { notSupport } from '../../utils'\n\n@Component({\n  tag: 'taro-voip-room-core'\n})\nexport class VoipRoom implements ComponentInterface {\n  componentDidLoad () {\n    notSupport('VoipRoom', this)\n  }\n\n  render () {\n    return (\n      <Host />\n    )\n  }\n}\n"],"version":3}

package/dist/components/taro-web-view-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TaroWebViewCore extends Components.TaroWebViewCore, HTMLElement {}
+export const TaroWebViewCore: {
+  prototype: TaroWebViewCore;
+  new (): TaroWebViewCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/taro-web-view-core.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const indexCss = "iframe{border:none}.taro-webview{position:fixed;top:0;bottom:0;z-index:999;width:100%;height:100%}";
+
+const WebView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.onLoad = createEvent(this, "load", 7);
+    this.onError = createEvent(this, "error", 7);
+    this.src = undefined;
+  }
+  render() {
+    const { src, onLoad, onError } = this;
+    return (h("iframe", { class: 'taro-webview', onLoad: (e) => {
+        e.stopPropagation();
+        onLoad.emit({ src });
+      }, onError: (e) => {
+        e.stopPropagation();
+        onError.emit({ src });
+      }, src: src }));
+  }
+  static get style() { return indexCss; }
+}, [0, "taro-web-view-core", {
+    "src": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-web-view-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-web-view-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, WebView);
+      }
+      break;
+  } });
+}
+
+const TaroWebViewCore = WebView;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaroWebViewCore, defineCustomElement };
+
+//# sourceMappingURL=taro-web-view-core.js.map

package/dist/components/taro-web-view-core.js.map

@@ -0,0 +1 @@
+{"file":"taro-web-view-core.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,oGAAoG;;MCMxG,OAAO;;;;;;;;EAalB,MAAM;IACJ,MAAM,EACJ,GAAG,EACH,MAAM,EACN,OAAO,EACR,GAAG,IAAI,CAAA;IACR,QACE,cACE,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;OACrB,EACD,OAAO,EAAE,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;OACtB,EACD,GAAG,EAAE,GAAG,GACR,EACH;GACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/web-view/style/index.scss?tag=taro-web-view-core","./src/components/web-view/web-view.tsx"],"sourcesContent":["iframe {\n  border: none;\n}\n\n.taro-webview {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  z-index: 999;\n  width: 100%;\n  height: 100%;\n}\n","import { Component, h, ComponentInterface, Prop, Event, EventEmitter } from '@stencil/core'\n\n@Component({\n  tag: 'taro-web-view-core',\n  styleUrl: './style/index.scss'\n})\nexport class WebView implements ComponentInterface {\n  @Prop() src: string\n\n  @Event({\n    eventName: 'load'\n  })\n  onLoad: EventEmitter\n\n  @Event({\n    eventName: 'error'\n  })\n  onError: EventEmitter\n\n  render () {\n    const {\n      src,\n      onLoad,\n      onError\n    } = this\n    return (\n      <iframe\n        class='taro-webview'\n        onLoad={(e: Event) => {\n          e.stopPropagation()\n          onLoad.emit({ src })\n        }}\n        onError={(e: Event) => {\n          e.stopPropagation()\n          onError.emit({ src })\n        }}\n        src={src}\n      />\n    )\n  }\n}\n"],"version":3}

package/dist/components/video-control.js

@@ -0,0 +1,233 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const formatTime = (time) => {
+  if (!time)
+    return '';
+  const sec = Math.round(time % 60);
+  const min = Math.round((time - sec) / 60);
+  return `${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}`;
+};
+const calcDist = (x, y) => {
+  return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+};
+const normalizeNumber = (number) => {
+  return Math.max(-1, Math.min(number, 1));
+};
+let scene = 'default';
+const screenFn = (function () {
+  let val;
+  const fnMap = [
+    [
+      'requestFullscreen',
+      'exitFullscreen',
+      'fullscreenElement',
+      'fullscreenEnabled',
+      'fullscreenchange',
+      'fullscreenerror'
+    ],
+    // New WebKit
+    [
+      'webkitRequestFullscreen',
+      'webkitExitFullscreen',
+      'webkitFullscreenElement',
+      'webkitFullscreenEnabled',
+      'webkitfullscreenchange',
+      'webkitfullscreenerror'
+    ],
+    // Old WebKit
+    [
+      'webkitRequestFullScreen',
+      'webkitCancelFullScreen',
+      'webkitCurrentFullScreenElement',
+      'webkitCancelFullScreen',
+      'webkitfullscreenchange',
+      'webkitfullscreenerror'
+    ],
+    [
+      'mozRequestFullScreen',
+      'mozCancelFullScreen',
+      'mozFullScreenElement',
+      'mozFullScreenEnabled',
+      'mozfullscreenchange',
+      'mozfullscreenerror'
+    ],
+    [
+      'msRequestFullscreen',
+      'msExitFullscreen',
+      'msFullscreenElement',
+      'msFullscreenEnabled',
+      'MSFullscreenChange',
+      'MSFullscreenError'
+    ]
+  ];
+  var defaultIOSMap = [
+    'webkitEnterFullscreen',
+    'webkitExitFullscreen',
+    'webkitCurrentFullScreenElement',
+    'webkitSupportsFullscreen',
+    'fullscreenchange',
+    'fullscreenerror'
+  ];
+  let i = 0;
+  const l = fnMap.length;
+  const ret = {};
+  // This for loop essentially checks the current document object for the property/methods above.
+  for (; i < l; i++) {
+    val = fnMap[i];
+    if (val && val[1] in document) {
+      for (i = 0; i < val.length; i++) {
+        ret[fnMap[0][i]] = val[i];
+      }
+      return ret;
+    }
+  }
+  if (!ret[fnMap[0][0]]) {
+    scene = 'iOS';
+    // when there is no any APIs be set.
+    // In IOS, there is no 'webkitEnterFullscreen' property `in document` but video can use it for fullscreen.
+    // ref: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen
+    for (i = 0; i < defaultIOSMap.length; i++) {
+      ret[fnMap[0][i]] = defaultIOSMap[i];
+    }
+  }
+  // If it doesn't find any of them, this whole function returns {}
+  // and the fn variable is set to this returned value.
+  return ret;
+})();
+const isHls = url => /\.(m3u8)($|\?)/i.test(url);
+
+const VideoControl = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.visible = false;
+    this.isDraggingProgressBall = false;
+    this.percentage = 0;
+    this.progressDimensions = {
+      left: 0,
+      width: 0
+    };
+    this.calcPercentage = (pageX) => {
+      let pos = pageX - this.progressDimensions.left;
+      pos = Math.max(pos, 0);
+      pos = Math.min(pos, this.progressDimensions.width);
+      return pos / this.progressDimensions.width;
+    };
+    this.onDragProgressBallStart = () => {
+      this.isDraggingProgressBall = true;
+      this.hideControlsTimer && clearTimeout(this.hideControlsTimer);
+    };
+    this.onClickProgress = (e) => {
+      e.stopPropagation();
+      const percentage = this.calcPercentage(e.pageX);
+      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)
+      return;
+    const touchX = e.touches[0].pageX;
+    this.percentage = this.calcPercentage(touchX);
+    this.setProgressBall(this.percentage);
+    this.setCurrentTime(this.percentage * this.duration);
+  }
+  onDocumentTouchEnd() {
+    if (!this.isDraggingProgressBall)
+      return;
+    this.isDraggingProgressBall = false;
+    this.seekFunc(this.percentage * this.duration);
+    this.toggleVisibility(true);
+  }
+  async setProgressBall(percentage) {
+    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);
+      }
+      this.el.style.visibility = 'visible';
+    }
+    else {
+      this.el.style.visibility = 'hidden';
+    }
+    this.visible = !!visible;
+  }
+  async getIsDraggingProgressBall() {
+    return this.isDraggingProgressBall;
+  }
+  async setCurrentTime(time) {
+    this.currentTimeRef.innerHTML = formatTime(time);
+  }
+  render() {
+    const { controls, currentTime, duration, isPlaying, pauseFunc, playFunc, showPlayBtn, showProgress } = this;
+    const formattedDuration = formatTime(duration);
+    let playBtn;
+    if (!showPlayBtn) {
+      playBtn = null;
+    }
+    else if (isPlaying) {
+      playBtn = h("div", { class: 'taro-video-control-button taro-video-control-button-pause', onClick: pauseFunc });
+    }
+    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)));
+  }
+  get el() { return this; }
+}, [4, "taro-video-control", {
+    "controls": [4],
+    "currentTime": [2, "current-time"],
+    "duration": [2],
+    "isPlaying": [4, "is-playing"],
+    "pauseFunc": [16],
+    "playFunc": [16],
+    "seekFunc": [16],
+    "showPlayBtn": [4, "show-play-btn"],
+    "showProgress": [4, "show-progress"],
+    "setProgressBall": [64],
+    "toggleVisibility": [64],
+    "getIsDraggingProgressBall": [64],
+    "setCurrentTime": [64]
+  }, [[5, "touchmove", "onDocumentTouchMove"], [5, "touchend", "onDocumentTouchEnd"], [5, "touchcancel", "onDocumentTouchEnd"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-video-control"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-video-control":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VideoControl);
+      }
+      break;
+  } });
+}
+
+export { VideoControl as V, scene as a, calcDist as c, defineCustomElement as d, formatTime as f, isHls as i, normalizeNumber as n, screenFn as s };
+
+//# sourceMappingURL=video-control.js.map

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

@@ -0,0 +1 @@
+{"file":"video-control.js","mappings":"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","names":[],"sources":["./src/components/video/utils.ts","./src/components/video/video-control.tsx"],"sourcesContent":["export const formatTime = (time?: number): string => {\r\n  if (!time) return ''\r\n  const sec = Math.round(time % 60)\r\n  const min = Math.round((time - sec) / 60)\r\n  return `${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}`\r\n}\r\n\r\nexport const calcDist = (x: number, y: number): number => {\r\n  return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))\r\n}\r\n\r\nexport const normalizeNumber = (number: number): number => {\r\n  return Math.max(-1, Math.min(number, 1))\r\n}\r\n\r\nexport let scene = 'default'\r\n\r\nexport const screenFn = (function () {\r\n  let val\r\n  const fnMap = [\r\n    [\r\n      'requestFullscreen',\r\n      'exitFullscreen',\r\n      'fullscreenElement',\r\n      'fullscreenEnabled',\r\n      'fullscreenchange',\r\n      'fullscreenerror'\r\n    ],\r\n    // New WebKit\r\n    [\r\n      'webkitRequestFullscreen',\r\n      'webkitExitFullscreen',\r\n      'webkitFullscreenElement',\r\n      'webkitFullscreenEnabled',\r\n      'webkitfullscreenchange',\r\n      'webkitfullscreenerror'\r\n    ],\r\n    // Old WebKit\r\n    [\r\n      'webkitRequestFullScreen',\r\n      'webkitCancelFullScreen',\r\n      'webkitCurrentFullScreenElement',\r\n      'webkitCancelFullScreen',\r\n      'webkitfullscreenchange',\r\n      'webkitfullscreenerror'\r\n    ],\r\n    [\r\n      'mozRequestFullScreen',\r\n      'mozCancelFullScreen',\r\n      'mozFullScreenElement',\r\n      'mozFullScreenEnabled',\r\n      'mozfullscreenchange',\r\n      'mozfullscreenerror'\r\n    ],\r\n    [\r\n      'msRequestFullscreen',\r\n      'msExitFullscreen',\r\n      'msFullscreenElement',\r\n      'msFullscreenEnabled',\r\n      'MSFullscreenChange',\r\n      'MSFullscreenError'\r\n    ]\r\n  ]\r\n  var defaultIOSMap = [\r\n    'webkitEnterFullscreen',\r\n    'webkitExitFullscreen',\r\n    'webkitCurrentFullScreenElement',\r\n    'webkitSupportsFullscreen',\r\n    'fullscreenchange',\r\n    'fullscreenerror'\r\n  ]\r\n  let i = 0\r\n  const l = fnMap.length\r\n  const ret: Record<string, any> = {}\r\n  // This for loop essentially checks the current document object for the property/methods above.\r\n  for (; i < l; i++) {\r\n    val = fnMap[i]\r\n    if (val && val[1] in document) {\r\n      for (i = 0; i < val.length; i++) {\r\n        ret[fnMap[0][i]] = val[i]\r\n      }\r\n      return ret\r\n    }\r\n  }\r\n  if (!ret[fnMap[0][0]]) {\r\n    scene = 'iOS'\r\n    // when there is no any APIs be set.\r\n\r\n    // In IOS, there is no 'webkitEnterFullscreen' property `in document` but video can use it for fullscreen.\r\n    // ref: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen\r\n    for (i = 0; i < defaultIOSMap.length; i++) {\r\n      ret[fnMap[0][i]] = defaultIOSMap[i]\r\n    }\r\n  }\r\n  // If it doesn't find any of them, this whole function returns {}\r\n  // and the fn variable is set to this returned value.\r\n  return ret\r\n})()\r\n\r\nexport const isHls = url => /\\.(m3u8)($|\\?)/i.test(url)\r\n","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"],"version":3}

package/dist/components/video-danmu.js

@@ -0,0 +1,110 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const VideoDanmu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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)))));
+  }
+}, [0, "taro-video-danmu", {
+    "enable": [4],
+    "danmuList": [32],
+    "sendDanmu": [64],
+    "tick": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-video-danmu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-video-danmu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VideoDanmu);
+      }
+      break;
+  } });
+}
+
+export { VideoDanmu as V, defineCustomElement as d };
+
+//# sourceMappingURL=video-danmu.js.map

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

@@ -0,0 +1 @@
+{"file":"video-danmu.js","mappings":"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","names":[],"sources":["./src/components/video/video-danmu.tsx"],"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"],"version":3}