eplayer - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/eplayer.js

 class Eplayer extends HTMLElement {
   constructor() {
     super()
-    this.src = this.getAttribute('src')
-    this.type = this.getAttribute('type')
-    isMobile() ? this.minit() : this.init()
+    this.src = this.getAttribute("src")
+    this.type = this.getAttribute("type")
+    this.init()
     this.stream()
@@ -11,8 +11,12 @@ }
   static get observedAttributes() {
-    return ['src', 'type']
+    return ["src", "type"]
   }
 
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === 'src') this.$('.source').src = newVal
-    if (name === 'type') this.$('.source').type = `video/${newVal}`
+  attributeChangedCallback(name, _, newVal) {
+    if (name === "src") this.src = this.$(".source").src = newVal
+    if (name === "type") {
+      this.$(".source").type = `video/${newVal}`
+      this.type = newVal
+    }
+    this.stream()
     this.video.load()
@@ -22,4 +26,4 @@ }
   waiting() {
-    this.$('.mark').classList.remove('playing')
-    this.$('.mark').classList.add('loading')
+    this.$(".mark").classList.remove("playing")
+    this.$(".mark").classList.add("loading")
   }
@@ -29,3 +33,3 @@
     switch (this.type) {
-      case 'hls':
+      case "hls":
         if (Hls.isSupported()) {
@@ -37,5 +41,5 @@ let hls = new Hls()
         break
-      case 'flv':
+      case "flv":
         if (flvjs.isSupported()) {
-          let flvPlayer = flvjs.createPlayer({type: 'flv', url: this.src})
+          let flvPlayer = flvjs.createPlayer({ type: "flv", url: this.src })
           flvPlayer.attachMediaElement(this.video)
@@ -49,5 +53,5 @@ flvPlayer.load()
   canplay() {
-    this.$('.mark').classList.remove('loading')
-    this.$('.mark').classList.add('playing')
-    this.$('.playing').onclick = () => {
+    this.$(".mark").classList.remove("loading")
+    this.$(".mark").classList.add("playing")
+    this.$(".playing").onclick = () => {
       clearTimeout(this.timer)
@@ -58,3 +62,3 @@ this.timer = setTimeout(() => {
     }
-    this.$('.total').innerHTML = getTimeStr(this.video.duration)
+    this.$(".total").innerHTML = getTimeStr(this.video.duration)
   }
@@ -65,8 +69,8 @@
       this.video.play()
-      this.$('.ep-video').style.display = 'none'
-      this.$('.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()
-      this.$('.ep-video').style.display = 'block'
-      this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+      this.$(".ep-video").style.display = "block"
+      this.$(".is-play").classList.replace("ep-pause", "ep-play")
     }
@@ -79,8 +83,8 @@ return false
       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, this.$(".line"))
+      this.$(".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, this.$(".line"))
+      this.$(".is-volume").classList.replace("ep-volume", "ep-volume-off")
     }
@@ -94,15 +98,15 @@ return false
       let bufferEnd = this.video.buffered.end(this.video.buffered.length - 1)
-      this.$('.buffer').style.width =
-        (bufferEnd / this.video.duration) * this.$('.progress').clientWidth +
-        'px'
+      this.$(".buffer").style.width =
+        (bufferEnd / this.video.duration) * this.$(".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.$('.dot').style.left = offset + 'px'
+      (this.video.currentTime / this.video.duration) * this.$(".bg").clientWidth
+    this.$(".now").innerHTML = cTime
+    this.$(".current").style.width = offset + "px"
+    this.$(".dot").style.left = offset + "px"
   }
 
   progress(e) {
-    let offset = e.offsetX / this.$('.progress').offsetWidth
+    let offset = e.offsetX / this.$(".progress").offsetWidth
     this.video.currentTime = this.video.duration * offset
@@ -113,3 +117,3 @@ return false
   down(e) {
-    this.disX = e.clientX - this.$('.dot').offsetLeft
+    this.disX = e.clientX - this.$(".dot").offsetLeft
     document.onmousemove = e => this.move(e)
@@ -125,12 +129,12 @@ document.onmouseup = () => {
     if (offset < 0) offset = 0
-    if (offset > this.$('.progress').clientWidth)
-      offset = this.$('.progress').clientWidth
-    this.$('.current').style.width = offset + 'px'
-    this.$('.dot').style.left = offset + 'px'
+    if (offset > this.$(".progress").clientWidth)
+      offset = this.$(".progress").clientWidth
+    this.$(".current").style.width = offset + "px"
+    this.$(".dot").style.left = offset + "px"
     this.video.currentTime =
-      (offset / this.$('.progress').clientWidth) * this.video.duration
+      (offset / this.$(".progress").clientWidth) * this.video.duration
     document.onmousemove = null
     setTimeout(document.onmousemove = e => {
-      if (e) this.move(e)
-    }, 30)
+        if (e) this.move(e)
+    },30)
   }
@@ -140,9 +144,9 @@
     clearTimeout(this.timer)
-    this.$('.controls').style.bottom = 0
-    this.$('.dot').style.bottom = 39 + 'px'
-    this.$('.ep-video').style.bottom = 70 + 'px'
+    this.$(".controls").style.bottom = 0
+    this.$(".dot").style.bottom = 39 + "px"
+    this.$(".ep-video").style.bottom = 70 + "px"
     this.timer = setTimeout(() => {
-      this.$('.controls').style.bottom = -42 + 'px'
-      this.$('.dot').style.bottom = -42 + 'px'
-      this.$('.ep-video').style.bottom = 25 + 'px'
+      this.$(".controls").style.bottom = -42 + "px"
+      this.$(".dot").style.bottom = -42 + "px"
+      this.$(".ep-video").style.bottom = 25 + "px"
     }, 5000)
@@ -152,3 +156,3 @@ }
   ended() {
-    this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+    this.$(".is-play").classList.replace("ep-pause", "ep-play")
   }
@@ -168,3 +172,3 @@
     } else {
-      let el = this.$('.eplayer')
+      let el = this.$(".eplayer")
       let rfs =
@@ -180,5 +184,8 @@ el.requestFullScreen ||
   init() {
-    let link = document.createElement('link')
-    link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
-    link.setAttribute('rel', 'stylesheet')
+    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)
@@ -343,3 +350,5 @@ let html = `
         <video id="video">
-          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}" class="source">
+          <source src="${this.src}" type="video/${
+      this.type ? this.type : "mp4"
+    }" class="source">
         </video>
@@ -380,6 +389,6 @@ <div class="mark loading"></div>
     `
-    let template = document.createElement('template')
+    let template = document.createElement("template")
     template.innerHTML = html
     this.attachShadow({
-      mode: 'open'
+      mode: "open"
     }).appendChild(template.content.cloneNode(true))
@@ -390,14 +399,14 @@ this.dom()
   dom() {
-    this.video = this.$('video')
+    this.video = this.$("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, this.$(".line"))
+    this.$(".is-volume").onclick = () => this.volume()
+    this.$(".line").forEach((item, index) => {
       item.onclick = () => {
         this.video.volume = index / 10
-        setVolume(index + 1, this.$('.line'))
+        setVolume(index + 1, this.$(".line"))
       }
     })
-    this.$('.dot').onmousedown = e => this.down(e)
-    this.$('.progress').onclick = e => this.progress(e)
+    this.$(".dot").onmousedown = e => this.down(e)
+    this.$(".progress").onclick = e => this.progress(e)
     this.video.onwaiting = () => this.waiting()
@@ -407,7 +416,7 @@ this.video.oncanplay = () => this.canplay()
 
-    this.$('.eplayer').onmousemove = () => this.alow()
-    this.$('.ep-full').onclick = () => this.full()
-    this.$('.ep-video').onclick = this.$('.is-play').onclick = () => this.play()
+    this.$(".eplayer").onmousemove = () => this.alow()
+    this.$(".ep-full").onclick = () => this.full()
+    this.$(".ep-video").onclick = this.$(".is-play").onclick = () => this.play()
     this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => {
+    this.$(".mark").ondblclick = () => {
       clearTimeout(this.timer)
@@ -418,12 +427,2 @@ this.full()
 
-  minit() {
-    let html = `
-    <video id="video" controls controlslist="nodownload" style="width:100%">
-      <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}">
-    </video>
-  `
-    this.innerHTML = html
-    this.video = document.getElementsByTagName('video')[0]
-  }
-
   $(node) {
@@ -435,3 +434,3 @@ let dom = this.shadowRoot.querySelectorAll(node)
 
-customElements.define('e-player', Eplayer)
+export default Eplayer
 
@@ -442,6 +441,6 @@ function getTimeStr(time) {
   let s = Math.floor(time % 60)
-  h = h >= 10 ? h : '0' + h
-  m = m >= 10 ? m : '0' + m
-  s = s >= 10 ? s : '0' + s
-  return h === '00' ? m + ':' + s : h + ':' + m + ':' + s
+  h = h >= 10 ? h : "0" + h
+  m = m >= 10 ? m : "0" + m
+  s = s >= 10 ? s : "0" + s
+  return h === "00" ? m + ":" + s : h + ":" + m + ":" + s
 }
@@ -451,6 +450,6 @@
   for (let j = index; j < node.length; j++) {
-    node[j].classList.remove('active')
+    node[j].classList.remove("active")
   }
   for (let i = 0; i < index; i++) {
-    node[i].classList.add('active')
+    node[i].classList.add("active")
   }
@@ -460,7 +459,8 @@ }
 function isFullScreen() {
-  return document.isFullScreen || document.webkitIsFullScreen || document.mozIsFullScreen
+  return (
+    document.isFullScreen ||
+    document.webkitIsFullScreen ||
+    document.mozIsFullScreen
+  )
 }
 
-function isMobile() {
-  return 'ontouchend' in document.body
-}

docs/eplayer.js

 class Eplayer extends HTMLElement {
   constructor() {
     super()
-    this.src = this.getAttribute('src')
-    this.type = this.getAttribute('type')
+    this.src = this.getAttribute("src")
+    this.type = this.getAttribute("type")
     isMobile() ? this.minit() : this.init()
@@ -11,8 +11,12 @@ this.stream()
   static get observedAttributes() {
-    return ['src', 'type']
+    return ["src", "type"]
   }
 
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === 'src') this.$('.source').src = newVal
-    if (name === 'type') this.$('.source').type = `video/${newVal}`
+  attributeChangedCallback(name, _, newVal) {
+    if (name === "src") this.src = this.$(".source").src = newVal
+    if (name === "type") {
+      this.$(".source").type = `video/${newVal}`
+      this.type = newVal
+    }
+    this.stream()
     this.video.load()
@@ -22,4 +26,4 @@ }
   waiting() {
-    this.$('.mark').classList.remove('playing')
-    this.$('.mark').classList.add('loading')
+    this.$(".mark").classList.remove("playing")
+    this.$(".mark").classList.add("loading")
   }
@@ -29,3 +33,3 @@
     switch (this.type) {
-      case 'hls':
+      case "hls":
         if (Hls.isSupported()) {
@@ -37,5 +41,5 @@ let hls = new Hls()
         break
-      case 'flv':
+      case "flv":
         if (flvjs.isSupported()) {
-          let flvPlayer = flvjs.createPlayer({type: 'flv', url: this.src})
+          let flvPlayer = flvjs.createPlayer({ type: "flv", url: this.src })
           flvPlayer.attachMediaElement(this.video)
@@ -49,5 +53,5 @@ flvPlayer.load()
   canplay() {
-    this.$('.mark').classList.remove('loading')
-    this.$('.mark').classList.add('playing')
-    this.$('.playing').onclick = () => {
+    this.$(".mark").classList.remove("loading")
+    this.$(".mark").classList.add("playing")
+    this.$(".playing").onclick = () => {
       clearTimeout(this.timer)
@@ -58,3 +62,3 @@ this.timer = setTimeout(() => {
     }
-    this.$('.total').innerHTML = getTimeStr(this.video.duration)
+    this.$(".total").innerHTML = getTimeStr(this.video.duration)
   }
@@ -65,8 +69,8 @@
       this.video.play()
-      this.$('.ep-video').style.display = 'none'
-      this.$('.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()
-      this.$('.ep-video').style.display = 'block'
-      this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+      this.$(".ep-video").style.display = "block"
+      this.$(".is-play").classList.replace("ep-pause", "ep-play")
     }
@@ -79,8 +83,8 @@ return false
       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, this.$(".line"))
+      this.$(".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, this.$(".line"))
+      this.$(".is-volume").classList.replace("ep-volume", "ep-volume-off")
     }
@@ -94,15 +98,15 @@ return false
       let bufferEnd = this.video.buffered.end(this.video.buffered.length - 1)
-      this.$('.buffer').style.width =
-        (bufferEnd / this.video.duration) * this.$('.progress').clientWidth +
-        'px'
+      this.$(".buffer").style.width =
+        (bufferEnd / this.video.duration) * this.$(".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.$('.dot').style.left = offset + 'px'
+      (this.video.currentTime / this.video.duration) * this.$(".bg").clientWidth
+    this.$(".now").innerHTML = cTime
+    this.$(".current").style.width = offset + "px"
+    this.$(".dot").style.left = offset + "px"
   }
 
   progress(e) {
-    let offset = e.offsetX / this.$('.progress').offsetWidth
+    let offset = e.offsetX / this.$(".progress").offsetWidth
     this.video.currentTime = this.video.duration * offset
@@ -113,3 +117,3 @@ return false
   down(e) {
-    this.disX = e.clientX - this.$('.dot').offsetLeft
+    this.disX = e.clientX - this.$(".dot").offsetLeft
     document.onmousemove = e => this.move(e)
@@ -125,12 +129,12 @@ document.onmouseup = () => {
     if (offset < 0) offset = 0
-    if (offset > this.$('.progress').clientWidth)
-      offset = this.$('.progress').clientWidth
-    this.$('.current').style.width = offset + 'px'
-    this.$('.dot').style.left = offset + 'px'
+    if (offset > this.$(".progress").clientWidth)
+      offset = this.$(".progress").clientWidth
+    this.$(".current").style.width = offset + "px"
+    this.$(".dot").style.left = offset + "px"
     this.video.currentTime =
-      (offset / this.$('.progress').clientWidth) * this.video.duration
+      (offset / this.$(".progress").clientWidth) * this.video.duration
     document.onmousemove = null
     setTimeout(document.onmousemove = e => {
-      if (e) this.move(e)
-    }, 30)
+        if (e) this.move(e)
+    },30)
   }
@@ -140,9 +144,9 @@
     clearTimeout(this.timer)
-    this.$('.controls').style.bottom = 0
-    this.$('.dot').style.bottom = 39 + 'px'
-    this.$('.ep-video').style.bottom = 70 + 'px'
+    this.$(".controls").style.bottom = 0
+    this.$(".dot").style.bottom = 39 + "px"
+    this.$(".ep-video").style.bottom = 70 + "px"
     this.timer = setTimeout(() => {
-      this.$('.controls').style.bottom = -42 + 'px'
-      this.$('.dot').style.bottom = -42 + 'px'
-      this.$('.ep-video').style.bottom = 25 + 'px'
+      this.$(".controls").style.bottom = -42 + "px"
+      this.$(".dot").style.bottom = -42 + "px"
+      this.$(".ep-video").style.bottom = 25 + "px"
     }, 5000)
@@ -152,3 +156,3 @@ }
   ended() {
-    this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+    this.$(".is-play").classList.replace("ep-pause", "ep-play")
   }
@@ -168,3 +172,3 @@
     } else {
-      let el = this.$('.eplayer')
+      let el = this.$(".eplayer")
       let rfs =
@@ -180,5 +184,8 @@ el.requestFullScreen ||
   init() {
-    let link = document.createElement('link')
-    link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
-    link.setAttribute('rel', 'stylesheet')
+    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)
@@ -343,3 +350,5 @@ let html = `
         <video id="video">
-          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}" class="source">
+          <source src="${this.src}" type="video/${
+      this.type ? this.type : "mp4"
+    }" class="source">
         </video>
@@ -380,6 +389,6 @@ <div class="mark loading"></div>
     `
-    let template = document.createElement('template')
+    let template = document.createElement("template")
     template.innerHTML = html
     this.attachShadow({
-      mode: 'open'
+      mode: "open"
     }).appendChild(template.content.cloneNode(true))
@@ -390,14 +399,14 @@ this.dom()
   dom() {
-    this.video = this.$('video')
+    this.video = this.$("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, this.$(".line"))
+    this.$(".is-volume").onclick = () => this.volume()
+    this.$(".line").forEach((item, index) => {
       item.onclick = () => {
         this.video.volume = index / 10
-        setVolume(index + 1, this.$('.line'))
+        setVolume(index + 1, this.$(".line"))
       }
     })
-    this.$('.dot').onmousedown = e => this.down(e)
-    this.$('.progress').onclick = e => this.progress(e)
+    this.$(".dot").onmousedown = e => this.down(e)
+    this.$(".progress").onclick = e => this.progress(e)
     this.video.onwaiting = () => this.waiting()
@@ -407,7 +416,7 @@ this.video.oncanplay = () => this.canplay()
 
-    this.$('.eplayer').onmousemove = () => this.alow()
-    this.$('.ep-full').onclick = () => this.full()
-    this.$('.ep-video').onclick = this.$('.is-play').onclick = () => this.play()
+    this.$(".eplayer").onmousemove = () => this.alow()
+    this.$(".ep-full").onclick = () => this.full()
+    this.$(".ep-video").onclick = this.$(".is-play").onclick = () => this.play()
     this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => {
+    this.$(".mark").ondblclick = () => {
       clearTimeout(this.timer)
@@ -421,7 +430,7 @@ this.full()
     <video id="video" controls controlslist="nodownload" style="width:100%">
-      <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}">
+      <source src="${this.src}" type="video/${this.type ? this.type : "mp4"}">
     </video>
   `
     this.innerHTML = html
-    this.video = document.getElementsByTagName('video')[0]
+    this.video = document.getElementsByTagName("video")[0]
   }
@@ -435,3 +444,3 @@
 
-customElements.define('e-player', Eplayer)
+customElements.define("e-player", Eplayer)
 
@@ -442,6 +451,6 @@ function getTimeStr(time) {
   let s = Math.floor(time % 60)
-  h = h >= 10 ? h : '0' + h
-  m = m >= 10 ? m : '0' + m
-  s = s >= 10 ? s : '0' + s
-  return h === '00' ? m + ':' + s : h + ':' + m + ':' + s
+  h = h >= 10 ? h : "0" + h
+  m = m >= 10 ? m : "0" + m
+  s = s >= 10 ? s : "0" + s
+  return h === "00" ? m + ":" + s : h + ":" + m + ":" + s
 }
@@ -451,6 +460,6 @@
   for (let j = index; j < node.length; j++) {
-    node[j].classList.remove('active')
+    node[j].classList.remove("active")
   }
   for (let i = 0; i < index; i++) {
-    node[i].classList.add('active')
+    node[i].classList.add("active")
   }
@@ -460,7 +469,11 @@ }
 function isFullScreen() {
-  return document.isFullScreen || document.webkitIsFullScreen || document.mozIsFullScreen
+  return (
+    document.isFullScreen ||
+    document.webkitIsFullScreen ||
+    document.mozIsFullScreen
+  )
 }
 
 function isMobile() {
-  return 'ontouchend' in document.body
+  return "ontouchend" in document.body
 }

docs/pic.js

@@ -0,0 +0,0 @@ var random_images_array = ["1363382418078.png",

package.json

 {
   "name": "eplayer",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A web-components html5 video player facing future",
@@ -5,0 +5,0 @@ "main": "./dist/eplayer.js",

No alert changes

Improved metrics

Total package byte prevSize

54764

increased by0.4%

Number of package files

13

increased by8.33%

Lines of code

1475

increased by1.51%

No dependency changes