eplayer 1.5.6 → 1.5.8

package/docs/eplayer.js

@@ -5,20 +5,21 @@ class Eplayer extends HTMLElement {
     this.src = this.getAttribute('src')
     this.type = this.getAttribute('type')
     this.beatmap = this.getAttribute('beatmap')
-    this.high = this.getAttribute('high')
+    this.height = this.getAttribute('height')
 
     this.init()
     this.stream()
   }
-  
+
   static get observedAttributes() {
-    return ['src', 'type', 'beatmap']
+    return ['src', 'type', 'beatmap', 'height']
   }
 
   attributeChangedCallback(name, _, newVal) {
     if (name === 'src') this.src = this.$('.video').src = newVal
     if (name === 'type') this.type = newVal
     if (name === 'beatmap') this.beatmap = newVal
+    if (name === 'height') this.height = newVal
     this.stream()
     this.startMug()
     this.video.load()
@@ -36,6 +37,8 @@ class Eplayer extends HTMLElement {
 
   startMug() {
     this.$('.mug').style.display = 'block'
+    this.$('.mug').style.height = this.height + 'px'
+    this.$('.mug').style.width = (this.height / 8 * 5) + 'px'
     this.$('.ep-video').style.display = 'none'
     this.$('.controls').style.display = 'none'
     if (!this.beatmap) return
@@ -435,8 +438,8 @@ class Eplayer extends HTMLElement {
             display:inline-block;
         }
         .mug {
-          height: ${this.high}px;
-          width: ${this.high/8*5}px;
+          height: ${this.height}px;
+          width: ${this.height / 8 * 5}px;
           position: absolute;
           z-index: 999;
           /* pointer-events: none; */
@@ -448,7 +451,6 @@ class Eplayer extends HTMLElement {
         }
         .wrap{
           position: relative;
-          // height: ${this.high}px;
         }
       </style>
       <div class="wrap">

package/docs/index.html

@@ -102,12 +102,14 @@
   </style>
   <script>
     setTimeout(() => {
+      document.querySelector('e-player').setAttribute('height', '450')
+
       document.querySelector('e-player').setAttribute('beatmap', '1:2|2:1|3:3|4:4|6:2|6:1|7:3|8:4|8:2|9:1|11:3|12:4|12:2|13:1|14:3|15:4|16:2|16:1|17:3|19:4|19:2|20:1|21:3|22:4')
     }, 1000)
   </script>
   <div class="wrapper">
 
-    <e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4" high="450">
+    <e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4">
     </e-player>
 
     <a href="https://github.com/132yse/eplayer">github</a>

package/package.json

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