eplayer 1.6.0 → 1.6.1

package/docs/danmaku.js

@@ -231,8 +231,6 @@ class Danmaku {
             count--
         }
     }
-
-
     // 轮询结束后，根据队列长度继续执行或停止执行
     _renderEnd() {
         if (this._queue.length > 0) {
@@ -245,12 +243,6 @@ class Danmaku {
     }
 
     pause() {
-        if (this._resumeTimer) { clearTimeout(this._resumeTimer) }
-        if (this._renderTimer) {
-            clearTimeout(this._renderTimer)
-            this._renderTimer = null
-        }
-
         if (this._paused) { return }
         this._paused = true
 
@@ -258,7 +250,8 @@ class Danmaku {
             const data = this._findData(y, id)
             if (data) {
                 // 获取已滚动距离
-                data.rolledDistance = -getTranslateX(node)
+                const transform = getComputedStyle(node, null).getPropertyValue('transform')
+                data.rolledDistance = -Number(new DOMMatrix(transform).m41)
 
                 // 移除动画，计算出弹幕所在的位置，固定样式
                 node.style.transition = ''

package/docs/eplayer.js

@@ -85,7 +85,7 @@ class Eplayer extends HTMLElement {
       this.$('.is-play').classList.replace('ep-play', 'ep-pause')
     } else {
       this.video.pause()
-      this.danmaku.play()
+      this.danmaku.pause()
       this.$('.ep-video').style.display = 'block'
       this.$('.is-play').classList.replace('ep-pause', 'ep-play')
     }
@@ -443,10 +443,6 @@ class Eplayer extends HTMLElement {
             display:inline-block;
         }
 
-        .wrap{
-          position: relative;
-        }
-
         .danmaku {
       position: absolute;
       top: 0;
@@ -456,11 +452,13 @@ class Eplayer extends HTMLElement {
       pointer-events: none;
       overflow: hidden;
       z-index: 999;
+      height:100%;
+      width:100%;
     }
       </style>
-      <div class="wrap">
-      <div class="danmaku"></div>
+      
       <div class="eplayer">
+      <div class="danmaku"></div>
         <video id="video" class="video" src="${this.src || ''}"></video>
         <div class="mark loading"></div>
         <div class="controls" style="bottom:-70px">
@@ -492,7 +490,6 @@ class Eplayer extends HTMLElement {
         <div class="epicon ep-video"></div>
         <div class="panel"></div>
       </div>
-      </div>
     `
     let template = document.createElement('template')
     template.innerHTML = html
@@ -534,7 +531,7 @@ class Eplayer extends HTMLElement {
       let dom = this.shadowRoot.querySelectorAll(key)
       this.doms[key] = dom.length > 1 ? [...dom] : dom[0]
     }
-    this.mount()
+
 
     for (const name in Eplayer.plugins) {
       const cb = Eplayer.plugins[name]
@@ -546,26 +543,7 @@ class Eplayer extends HTMLElement {
     }
   }
 
-  delegate(type, map) {
-    const that = this
-    if (typeof map === 'function') {
-      this.shadowRoot.addEventListener(type, map.bind(that))
-    } else {
-      this.shadowRoot.addEventListener(type, (e) => {
-        for (const key in map) e.target.matches(key) && map[key].call(that, e)
-      })
-    }
-  }
-
-  pip(e) {
-    if (!document.pictureInPictureElement) {
-      this.video.requestPictureInPicture()
-    } else {
-      document.exitPictureInPicture()
-    }
-  }
-
-  mount() {
+  connectedCallback() {
     this.video = this.$('.video')
     this.video.volume = 0.5
     this.danmaku = new Danmaku({
@@ -601,6 +579,26 @@ class Eplayer extends HTMLElement {
     this.delegate('pointerdown', this.alow)
     this.$('.eplayer').oncontextmenu = () => false
   }
+
+  delegate(type, map) {
+    const that = this
+    if (typeof map === 'function') {
+      this.shadowRoot.addEventListener(type, map.bind(that))
+    } else {
+      this.shadowRoot.addEventListener(type, (e) => {
+        for (const key in map) e.target.matches(key) && map[key].call(that, e)
+      })
+    }
+  }
+
+  pip(e) {
+    if (!document.pictureInPictureElement) {
+      this.video.requestPictureInPicture()
+    } else {
+      document.exitPictureInPicture()
+    }
+  }
+
 }
 
 Eplayer.plugins = {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eplayer",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A web-components html5 video player facing future",
   "main": "./docs/eplayer.js",
   "module": "./docs/eplayer.js",