eplayer - npm Package Compare versions

Comparing version 1.3.11 to 1.3.12

package.json

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

packages/eplayer/index.js

@@ -15,3 +15,3 @@ export class Eplayer extends HTMLElement {
   attributeChangedCallback (name, _, newVal) {
-    if (name === 'src') this.src = this.$('.video').src = newVal
+    if (name === 'src') this.src = $('.video').src = newVal
     if (name === 'type') this.type = newVal
@@ -22,10 +22,5 @@ this.stream()
 
-  $ (node) {
-    let dom = this.shadowRoot.querySelectorAll(node)
-    return dom.length > 1 ? dom : dom[0]
-  }
-
   waiting () {
-    this.$('.mark').classList.remove('playing')
-    this.$('.mark').classList.add('loading')
+    $('.mark').classList.remove('playing')
+    $('.mark').classList.add('loading')
   }
@@ -46,5 +41,5 @@
   canplay () {
-    this.$('.mark').classList.remove('loading')
-    this.$('.mark').classList.add('playing')
-    this.$('.playing').onclick = () => {
+    $('.mark').classList.remove('loading')
+    $('.mark').classList.add('playing')
+    $('.playing').onclick = () => {
       clearTimeout(this.timer)
@@ -55,3 +50,3 @@ this.timer = setTimeout(() => {
     }
-    this.$('.total').innerHTML = getTimeStr(this.video.duration)
+    $('.total').innerHTML = getTimeStr(this.video.duration)
   }
@@ -62,8 +57,8 @@
       this.video.play()
-      this.$('.ep-video').style.display = 'none'
-      this.$('.is-play').classList.replace('ep-play', 'ep-pause')
+      $('.ep-video').style.display = 'none'
+      $('.is-play').classList.replace('ep-play', 'ep-pause')
     } else {
       this.video.pause()
-      this.$('.ep-video').style.display = 'block'
-      this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+      $('.ep-video').style.display = 'block'
+      $('.is-play').classList.replace('ep-pause', 'ep-play')
     }
@@ -75,8 +70,8 @@ }
       this.video.muted = false
-      setVolume(this.video.volume * 10, this.$('.line'))
-      this.$('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
+      setVolume(this.video.volume * 10, $('.line'))
+      $('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
     } else {
       this.video.muted = true
-      setVolume(0, this.$('.line'))
-      this.$('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
+      setVolume(0, $('.line'))
+      $('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
     }
@@ -89,14 +84,14 @@ }
       let bufferEnd = this.video.buffered.end(this.video.buffered.length - 1)
-      this.$('.buffer').style.width =
-        (bufferEnd / this.video.duration) * this.$('.progress').clientWidth +
+      $('.buffer').style.width =
+        (bufferEnd / this.video.duration) * $('.progress').clientWidth +
         'px'
     }
     let offset =
-      (this.video.currentTime / this.video.duration) * this.$('.bg').clientWidth
-    this.$('.now').innerHTML = cTime
-    this.$('.current').style.width = offset + 'px'
+      (this.video.currentTime / this.video.duration) * $('.bg').clientWidth
+    $('.now').innerHTML = cTime
+    $('.current').style.width = offset + 'px'
   }
 
   progress (e) {
-    let offset = e.offsetX / this.$('.progress').offsetWidth
+    let offset = e.offsetX / $('.progress').offsetWidth
     this.video.currentTime = this.video.duration * offset
@@ -107,3 +102,3 @@ }
     e.stopPropagation()
-    this.disX = e.clientX - this.$('.cycle').offsetLeft
+    this.disX = e.clientX - $('.cycle').offsetLeft
     document.onmousemove = e => this.move(e)
@@ -121,6 +116,8 @@ document.onmouseup = () => {
     if (offset < 0) offset = 0
-    if (offset > this.$('.progress').clientWidth) { offset = this.$('.progress').clientWidth }
-    this.$('.current').style.width = offset + 'px'
+    if (offset > $('.progress').clientWidth) {
+      offset = $('.progress').clientWidth
+    }
+    $('.current').style.width = offset + 'px'
     this.video.currentTime =
-      (offset / this.$('.progress').clientWidth) * this.video.duration
+      (offset / $('.progress').clientWidth) * this.video.duration
     document.onmousemove = null
@@ -137,7 +134,7 @@ setTimeout(
     clearTimeout(this.timer)
-    this.$('.controls').style.bottom = 0
-    this.$('.ep-video').style.bottom = 70 + 'px'
+    $('.controls').style.bottom = 0
+    $('.ep-video').style.bottom = 70 + 'px'
     this.timer = setTimeout(() => {
-      this.$('.controls').style.bottom = -50 + 'px'
-      this.$('.ep-video').style.bottom = 25 + 'px'
+      $('.controls').style.bottom = -50 + 'px'
+      $('.ep-video').style.bottom = 25 + 'px'
     }, 5000)
@@ -158,3 +155,3 @@ }
         } catch (e) {}
-        setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
+        setVolume(this.video.volume.toFixed(1) * 10, $('.line'))
         break
@@ -165,3 +162,3 @@ case 40:
         } catch (e) {}
-        setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
+        setVolume(this.video.volume.toFixed(1) * 10, $('.line'))
         break
@@ -176,3 +173,3 @@ case 32:
   ended () {
-    this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+    $('.is-play').classList.replace('ep-pause', 'ep-play')
   }
@@ -192,3 +189,3 @@
     } else {
-      let el = this.$('.eplayer')
+      let el = $('.eplayer')
       let rfs =
@@ -375,3 +372,3 @@ el.requestFullScreen ||
       <div class="eplayer">
-        <video id="video" class="video" src="this.${this.src}"></video>
+        <video id="video" class="video" src="${this.src}"></video>
         <div class="mark loading"></div>
@@ -422,24 +419,24 @@ <div class="controls" style="bottom:-50px">
   dom () {
-    this.video = this.$('video')
+    this.video = $('video')
     this.video.volume = 0.5
-    setVolume(this.video.volume * 10, this.$('.line'))
-    this.$('.is-volume').onclick = () => this.volume()
-    this.$('.line').forEach((item, index) => {
+    setVolume(this.video.volume * 10, $('.line'))
+    $('.is-volume').onclick = () => this.volume()
+    $('.line').forEach((item, index) => {
       item.onclick = () => {
         this.video.volume = (index + 1) / 10
-        setVolume(index + 1, this.$('.line'))
+        setVolume(index + 1, $('.line'))
       }
     })
-    this.$('.progress').onmousedown = e => this.progress(e)
+    $('.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)
+    $('.cycle').onmousedown = e => this.down(e)
 
-    this.$('.eplayer').onmousemove = () => this.alow()
+    $('.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()
+    $('.ep-full').onclick = () => this.full()
+    $('.ep-video').onclick = $('.is-play').onclick = () => this.play()
     this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => {
+    $('.mark').ondblclick = () => {
       clearTimeout(this.timer)
@@ -478,2 +475,7 @@ this.full()
 
+function $ (node) {
+  let dom = Eplayer.shadowRoot.querySelectorAll(node)
+  return dom.length > 1 ? dom : dom[0]
+}
+
 (function () {
@@ -480,0 +482,0 @@ let link = document.createElement('link')

No alert changes

Improved metrics

Lines of code

1090

increased by0.18%

Worsened metrics

Total package byte prevSize

39576

decreased by-0.55%

No dependency changes