eplayer - npm Package Compare versions

Comparing version 1.4.5 to 1.5.0

docs/eplayer.js

@@ -101,4 +101,4 @@ class Eplayer extends HTMLElement {
     document.onmousemove = (e) => this.move(e)
+
     document.onmouseup = () => {
-      e.stopPropagation()
       document.onmousemove = null
@@ -119,8 +119,3 @@ document.onmouseup = null
     document.onmousemove = null
-    setTimeout(
-      (document.onmousemove = (e) => {
-        if (e) this.move(e)
-      }),
-      30
-    )
+    setTimeout((document.onmousemove = (e) => this.move(e)), 30)
   }
@@ -198,3 +193,2 @@
       panel.style.height = panel.childElementCount * 24 + 'px'
-      // 40 是 controls 的高度
       if (panel.offsetHeight + e.offsetY + 40 > eplayer.offsetHeight) {
@@ -207,3 +201,2 @@ panel.style.top = ''
       }
-      // 10 是随便写的 margin，贴边不好看
       if (panel.offsetWidth + e.offsetX + 10 > eplayer.offsetWidth) {
@@ -219,6 +212,11 @@ panel.style.left = ''
 
+  speed(e) {
+    this.video.playbackRate === 2 ? (this.video.playbackRate = 1) : (this.video.playbackRate = this.video.playbackRate + 0.5)
+    this.$('.speed').innerText = this.video.playbackRate + 'x'
+  }
+
   init() {
     let html = `
       <style>
-        @import "https://at.alicdn.com/t/font_836948_6lbb2iu59.css";
+        @import "https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css";
         *{
@@ -283,4 +281,7 @@ padding:0;
         }
+        .lines{
+          padding:0 10px;
+        }
         .line{
-          padding:0 1px;
+          padding:0;
           margin-bottom: -2px;
@@ -412,2 +413,14 @@ cursor:pointer
         }
+        .speed{
+            font-size:10px;
+            font-style:italic;
+            width:22px;
+            text-align:center;
+            border-radius:11px;
+            color:rgba(0,0,0,.5);
+            font-weight:900;
+            background:var(--icons,rgba(255,255,255,.8));
+            margin-left:-10px;
+            display:inline-block;
+        }
       </style>
@@ -435,12 +448,17 @@ <div class="eplayer">
               <i class="epicon ep-volume is-volume"></i>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
+              <ol class="lines">
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+              </ol>
+              <i class="epicon ep-speed">              
+                <b class="speed">1x</b>
+              </i>
               <i class="epicon ep-full"></i>
@@ -484,2 +502,3 @@ </div>
       '.panel',
+      '.speed',
     ]
@@ -503,2 +522,13 @@
 
+  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)
+      })
+    }
+  }
+
   mount() {
@@ -508,3 +538,27 @@ this.video = this.$('.video')
     setVolume(this.video.volume * 10, this.$('.line'))
-    this.$('.is-volume').onclick = () => this.volume()
+    this.video.onwaiting = this.waiting.bind(this)
+    this.video.oncanplay = this.canplay.bind(this)
+    this.video.ontimeupdate = this.update.bind(this)
+    this.video.onended = this.ended.bind(this)
+    this.delegate('click', {
+      '.is-volume': this.volume,
+      '.ep-full': this.full,
+      '.ep-video': this.play,
+      '.is-play': this.play,
+      '.ep-speed': this.speed,
+      '.speed': this.speed,
+    })
+    this.delegate('mousedown', {
+      '.progress': this.progress,
+      '.cycle': this.down,
+      '.mark': this.panel,
+    })
+    this.delegate('dblclick', {
+      '.mark': (e) => {
+        clearTimeout(this.timer)
+        this.full()
+      },
+    })
+    this.delegate('keydown', this.keydown)
+    this.delegate('mousemove', this.alow)
     this.$('.line').forEach((item, index) => {
@@ -516,19 +570,3 @@ item.onclick = () => {
     })
-    this.$('.progress').onmousedown = (e) => this.progress(e)
-    this.video.onwaiting = () => this.waiting()
-    this.video.oncanplay = () => this.canplay()
-    this.video.ontimeupdate = () => this.update()
-    this.$('.cycle').onmousedown = (e) => this.down(e)
-
-    this.$('.eplayer').onmousemove = () => this.alow()
-    document.onkeydown = (e) => this.keydown(e)
-    this.$('.ep-full').onclick = () => this.full()
-    this.$('.ep-video').onclick = this.$('.is-play').onclick = () => this.play()
-    this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => {
-      clearTimeout(this.timer)
-      this.full()
-    }
-    this.$('.eplayer').oncontextmenu = (e) => false
-    this.$('.mark').onmousedown = (e) => this.panel(e)
+    document.oncontextmenu = () => false
   }
@@ -568,3 +606,3 @@ }
   let link = document.createElement('link')
-  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
+  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css')
   link.setAttribute('rel', 'stylesheet')
@@ -571,0 +609,0 @@ document.head.appendChild(link)

package.json

 {
   "name": "eplayer",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "A web-components html5 video player facing future",
@@ -5,0 +5,0 @@ "main": "./packages/eplayer/index.js",

packages/eplayer/index.js

@@ -101,4 +101,4 @@ export default class Eplayer extends HTMLElement {
     document.onmousemove = (e) => this.move(e)
+
     document.onmouseup = () => {
-      e.stopPropagation()
       document.onmousemove = null
@@ -119,8 +119,3 @@ document.onmouseup = null
     document.onmousemove = null
-    setTimeout(
-      (document.onmousemove = (e) => {
-        if (e) this.move(e)
-      }),
-      30
-    )
+    setTimeout((document.onmousemove = (e) => this.move(e)), 30)
   }
@@ -198,3 +193,2 @@
       panel.style.height = panel.childElementCount * 24 + 'px'
-      // 40 是 controls 的高度
       if (panel.offsetHeight + e.offsetY + 40 > eplayer.offsetHeight) {
@@ -207,3 +201,2 @@ panel.style.top = ''
       }
-      // 10 是随便写的 margin，贴边不好看
       if (panel.offsetWidth + e.offsetX + 10 > eplayer.offsetWidth) {
@@ -219,6 +212,11 @@ panel.style.left = ''
 
+  speed(e) {
+    this.video.playbackRate === 2 ? (this.video.playbackRate = 1) : (this.video.playbackRate = this.video.playbackRate + 0.5)
+    this.$('.speed').innerText = this.video.playbackRate + 'x'
+  }
+
   init() {
     let html = `
       <style>
-        @import "https://at.alicdn.com/t/font_836948_6lbb2iu59.css";
+        @import "https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css";
         *{
@@ -283,4 +281,7 @@ padding:0;
         }
+        .lines{
+          padding:0 10px;
+        }
         .line{
-          padding:0 1px;
+          padding:0;
           margin-bottom: -2px;
@@ -412,2 +413,14 @@ cursor:pointer
         }
+        .speed{
+            font-size:10px;
+            font-style:italic;
+            width:22px;
+            text-align:center;
+            border-radius:11px;
+            color:rgba(0,0,0,.5);
+            font-weight:900;
+            background:var(--icons,rgba(255,255,255,.8));
+            margin-left:-10px;
+            display:inline-block;
+        }
       </style>
@@ -435,12 +448,17 @@ <div class="eplayer">
               <i class="epicon ep-volume is-volume"></i>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
-              <span class="line"><i></i></span>
+              <ol class="lines">
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+                <span class="line"><i></i></span>
+              </ol>
+              <i class="epicon ep-speed">              
+                <b class="speed">1x</b>
+              </i>
               <i class="epicon ep-full"></i>
@@ -484,2 +502,3 @@ </div>
       '.panel',
+      '.speed',
     ]
@@ -503,2 +522,13 @@
 
+  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)
+      })
+    }
+  }
+
   mount() {
@@ -508,3 +538,27 @@ this.video = this.$('.video')
     setVolume(this.video.volume * 10, this.$('.line'))
-    this.$('.is-volume').onclick = () => this.volume()
+    this.video.onwaiting = this.waiting.bind(this)
+    this.video.oncanplay = this.canplay.bind(this)
+    this.video.ontimeupdate = this.update.bind(this)
+    this.video.onended = this.ended.bind(this)
+    this.delegate('click', {
+      '.is-volume': this.volume,
+      '.ep-full': this.full,
+      '.ep-video': this.play,
+      '.is-play': this.play,
+      '.ep-speed': this.speed,
+      '.speed': this.speed,
+    })
+    this.delegate('mousedown', {
+      '.progress': this.progress,
+      '.cycle': this.down,
+      '.mark': this.panel,
+    })
+    this.delegate('dblclick', {
+      '.mark': (e) => {
+        clearTimeout(this.timer)
+        this.full()
+      },
+    })
+    this.delegate('keydown', this.keydown)
+    this.delegate('mousemove', this.alow)
     this.$('.line').forEach((item, index) => {
@@ -516,19 +570,3 @@ item.onclick = () => {
     })
-    this.$('.progress').onmousedown = (e) => this.progress(e)
-    this.video.onwaiting = () => this.waiting()
-    this.video.oncanplay = () => this.canplay()
-    this.video.ontimeupdate = () => this.update()
-    this.$('.cycle').onmousedown = (e) => this.down(e)
-
-    this.$('.eplayer').onmousemove = () => this.alow()
-    document.onkeydown = (e) => this.keydown(e)
-    this.$('.ep-full').onclick = () => this.full()
-    this.$('.ep-video').onclick = this.$('.is-play').onclick = () => this.play()
-    this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => {
-      clearTimeout(this.timer)
-      this.full()
-    }
-    this.$('.eplayer').oncontextmenu = (e) => false
-    this.$('.mark').onmousedown = (e) => this.panel(e)
+    document.oncontextmenu = () => false
   }
@@ -568,5 +606,5 @@ }
   let link = document.createElement('link')
-  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
+  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css')
   link.setAttribute('rel', 'stylesheet')
   document.head.appendChild(link)
-})()
+})()

README.md

 <p align="center"><img src="http://ww1.sinaimg.cn/large/0065Zy9egy1fvcjfzaa1lj30dw0dwwhe.jpg" alt="eplayer logo" width="200px"></p>
 
-# eplayer [![Financial Contributors on Open Collective](https://opencollective.com/eplayer/all/badge.svg?label=financial+contributors)](https://opencollective.com/eplayer) [![NPM version](https://img.shields.io/npm/v/eplayer.svg?style=flat-square)](https://npmjs.com/package/eplayer) [![NPM downloads](https://img.shields.io/npm/dt/eplayer.svg?style=flat-square)](https://npmjs.com/package/eplayer)
+# eplayer [![NPM version](https://img.shields.io/npm/v/eplayer.svg?style=flat-square)](https://npmjs.com/package/eplayer) [![NPM downloads](https://img.shields.io/npm/dt/eplayer.svg?style=flat-square)](https://npmjs.com/package/eplayer)
 
@@ -11,6 +11,10 @@ :dart: A web-components html5 video player facing future.
 
-[clicli.us - C 站](https://www.clicli.us/)
+[clicli - C 站](https://www.clicli.me/)
 
-[ayypd.cn - 爱看动漫网](http://sp.ayypd.cn/)
+#### Contributors
 
+感谢大家的 pr，阿里嘎多！
+
+<a href="https://github.com/yisar/eplayer/graphs/contributors"><img src="https://opencollective.com/eplayer/contributors.svg?width=890&button=false" /></a>
+
 ### Use
@@ -190,5 +194,5 @@
 
-#### 移动端
+#### WAP
 
-暂时不支持移动端，等我
+WAP 端建议使用原生播放器，国产浏览器太乱了，没得兼容，同时建议往 APP 上引流
 
@@ -199,7 +203,1 @@ #### Screenshot
 
-## Contributors
-
-感谢大家的 pr，阿里嘎多！
-
-<a href="https://github.com/yisar/eplayer/graphs/contributors"><img src="https://opencollective.com/eplayer/contributors.svg?width=890&button=false" /></a>
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49391

increased by3.94%

Lines of code

1331

increased by5.8%

Worsened metrics

Number of lines in readme file

201

decreased by-0.99%

No dependency changes