eplayer - npm Package Compare versions

Comparing version 1.3.10 to 1.3.11

package.json

 {
   "name": "eplayer",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "description": "A web-components html5 video player facing future",
-  "main": "./packages/eplayer/eplayer.js",
-  "module": "./packages/eplayer/index.js",
+  "main": "./packages/eplayer/index.js",
   "scripts": {
@@ -8,0 +7,0 @@ "test": "echo \"Error: no test specified\" && exit 1",

packages/eplayer/index.js

@@ -15,3 +15,3 @@ export class Eplayer extends HTMLElement {
   attributeChangedCallback (name, _, newVal) {
-    if (name === 'src') this.src = $('.video').src = newVal
+    if (name === 'src') this.src = this.$('.video').src = newVal
     if (name === 'type') this.type = newVal
@@ -22,5 +22,10 @@ this.stream()
 
+  $ (node) {
+    let dom = this.shadowRoot.querySelectorAll(node)
+    return dom.length > 1 ? dom : dom[0]
+  }
+
   waiting () {
-    $('.mark').classList.remove('playing')
-    $('.mark').classList.add('loading')
+    this.$('.mark').classList.remove('playing')
+    this.$('.mark').classList.add('loading')
   }
@@ -41,5 +46,5 @@
   canplay () {
-    $('.mark').classList.remove('loading')
-    $('.mark').classList.add('playing')
-    $('.playing').onclick = () => {
+    this.$('.mark').classList.remove('loading')
+    this.$('.mark').classList.add('playing')
+    this.$('.playing').onclick = () => {
       clearTimeout(this.timer)
@@ -50,3 +55,3 @@ this.timer = setTimeout(() => {
     }
-    $('.total').innerHTML = getTimeStr(this.video.duration)
+    this.$('.total').innerHTML = getTimeStr(this.video.duration)
   }
@@ -57,8 +62,8 @@
       this.video.play()
-      $('.ep-video').style.display = 'none'
-      $('.is-play').classList.replace('ep-play', 'ep-pause')
+      this.$('.ep-video').style.display = 'none'
+      this.$('.is-play').classList.replace('ep-play', 'ep-pause')
     } else {
       this.video.pause()
-      $('.ep-video').style.display = 'block'
-      $('.is-play').classList.replace('ep-pause', 'ep-play')
+      this.$('.ep-video').style.display = 'block'
+      this.$('.is-play').classList.replace('ep-pause', 'ep-play')
     }
@@ -70,8 +75,8 @@ }
       this.video.muted = false
-      setVolume(this.video.volume * 10, $('.line'))
-      $('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
+      setVolume(this.video.volume * 10, this.$('.line'))
+      this.$('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
     } else {
       this.video.muted = true
-      setVolume(0, $('.line'))
-      $('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
+      setVolume(0, this.$('.line'))
+      this.$('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
     }
@@ -84,13 +89,14 @@ }
       let bufferEnd = this.video.buffered.end(this.video.buffered.length - 1)
-      $('.buffer').style.width =
-        (bufferEnd / this.video.duration) * $('.progress').clientWidth + 'px'
+      this.$('.buffer').style.width =
+        (bufferEnd / this.video.duration) * this.$('.progress').clientWidth +
+        'px'
     }
     let offset =
-      (this.video.currentTime / this.video.duration) * $('.bg').clientWidth
-    $('.now').innerHTML = cTime
-    $('.current').style.width = offset + 'px'
+      (this.video.currentTime / this.video.duration) * this.$('.bg').clientWidth
+    this.$('.now').innerHTML = cTime
+    this.$('.current').style.width = offset + 'px'
   }
 
   progress (e) {
-    let offset = e.offsetX / $('.progress').offsetWidth
+    let offset = e.offsetX / this.$('.progress').offsetWidth
     this.video.currentTime = this.video.duration * offset
@@ -101,3 +107,3 @@ }
     e.stopPropagation()
-    this.disX = e.clientX - $('.cycle').offsetLeft
+    this.disX = e.clientX - this.$('.cycle').offsetLeft
     document.onmousemove = e => this.move(e)
@@ -115,6 +121,6 @@ document.onmouseup = () => {
     if (offset < 0) offset = 0
-    if (offset > $('.progress').clientWidth) offset = $('.progress').clientWidth
-    $('.current').style.width = offset + 'px'
+    if (offset > this.$('.progress').clientWidth) { offset = this.$('.progress').clientWidth }
+    this.$('.current').style.width = offset + 'px'
     this.video.currentTime =
-      (offset / $('.progress').clientWidth) * this.video.duration
+      (offset / this.$('.progress').clientWidth) * this.video.duration
     document.onmousemove = null
@@ -131,7 +137,7 @@ setTimeout(
     clearTimeout(this.timer)
-    $('.controls').style.bottom = 0
-    $('.ep-video').style.bottom = 70 + 'px'
+    this.$('.controls').style.bottom = 0
+    this.$('.ep-video').style.bottom = 70 + 'px'
     this.timer = setTimeout(() => {
-      $('.controls').style.bottom = -50 + 'px'
-      $('.ep-video').style.bottom = 25 + 'px'
+      this.$('.controls').style.bottom = -50 + 'px'
+      this.$('.ep-video').style.bottom = 25 + 'px'
     }, 5000)
@@ -152,3 +158,3 @@ }
         } catch (e) {}
-        setVolume(this.video.volume.toFixed(1) * 10, $('.line'))
+        setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
         break
@@ -159,3 +165,3 @@ case 40:
         } catch (e) {}
-        setVolume(this.video.volume.toFixed(1) * 10, $('.line'))
+        setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
         break
@@ -170,3 +176,3 @@ case 32:
   ended () {
-    $('.is-play').classList.replace('ep-pause', 'ep-play')
+    this.$('.is-play').classList.replace('ep-pause', 'ep-play')
   }
@@ -186,3 +192,3 @@
     } else {
-      let el = $('.eplayer')
+      let el = this.$('.eplayer')
       let rfs =
@@ -198,9 +204,2 @@ el.requestFullScreen ||
   init () {
-    let link = document.createElement('link')
-    link.setAttribute(
-      'href',
-      'https://at.alicdn.com/t/font_836948_6lbb2iu59.css'
-    )
-    link.setAttribute('rel', 'stylesheet')
-    document.head.appendChild(link)
     let html = `
@@ -377,3 +376,3 @@ <style>
       <div class="eplayer">
-        <video id="video" class="video" src="${this.src}"></video>
+        <video id="video" class="video" src="this.${this.src}"></video>
         <div class="mark loading"></div>
@@ -424,24 +423,24 @@ <div class="controls" style="bottom:-50px">
   dom () {
-    this.video = $('video')
+    this.video = this.$('video')
     this.video.volume = 0.5
-    setVolume(this.video.volume * 10, $('.line'))
-    $('.is-volume').onclick = () => this.volume()
-    $('.line').forEach((item, index) => {
+    setVolume(this.video.volume * 10, this.$('.line'))
+    this.$('.is-volume').onclick = () => this.volume()
+    this.$('.line').forEach((item, index) => {
       item.onclick = () => {
         this.video.volume = (index + 1) / 10
-        setVolume(index + 1, $('.line'))
+        setVolume(index + 1, this.$('.line'))
       }
     })
-    $('.progress').onmousedown = e => this.progress(e)
+    this.$('.progress').onmousedown = e => this.progress(e)
     this.video.onwaiting = () => this.waiting()
     this.video.oncanplay = () => this.canplay()
     this.video.ontimeupdate = () => this.update()
-    $('.cycle').onmousedown = e => this.down(e)
+    this.$('.cycle').onmousedown = e => this.down(e)
 
-    $('.eplayer').onmousemove = () => this.alow()
+    this.$('.eplayer').onmousemove = () => this.alow()
     document.onkeydown = e => this.keydown(e)
-    $('.ep-full').onclick = () => this.full()
-    $('.ep-video').onclick = $('.is-play').onclick = () => this.play()
+    this.$('.ep-full').onclick = () => this.full()
+    this.$('.ep-video').onclick = this.$('.is-play').onclick = () => this.play()
     this.video.onended = () => this.ended()
-    $('.mark').ondblclick = () => {
+    this.$('.mark').ondblclick = () => {
       clearTimeout(this.timer)
@@ -480,5 +479,7 @@ this.full()
 
-function $ (node) {
-  let dom = document.querySelector('e-player').shadowRoot.querySelectorAll(node)
-  return dom.length > 1 ? dom : dom[0]
-}
+(function () {
+  let link = document.createElement('link')
+  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
+  link.setAttribute('rel', 'stylesheet')
+  document.head.appendChild(link)
+})()

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

39796

increased by0.42%

No dependency changes