eplayer 1.5.13 → 1.5.15

package/docs/eplayer.js

@@ -13,7 +13,7 @@ class Eplayer extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['src', 'type', 'beatmap', 'height','live']
+    return ['src', 'type', 'beatmap', 'height', 'live']
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -21,7 +21,17 @@ class Eplayer extends HTMLElement {
     if (name === 'type') this.type = newVal
     if (name === 'beatmap') this.beatmap = newVal
     if (name === 'height') this.height = newVal
-    if (name === 'live') this.live = JSON.parse(newVal)
+    if (name === 'live') {
+      this.live = JSON.parse(newVal)
+      if (this.live) {
+        this.$('.progress').style.display = 'none'
+        this.$('.time').style.display = 'none'
+      }else{
+        this.$('.progress').style.display = 'block'
+        this.$('.time').style.display = 'inline-block'
+      }
+    }
+
     this.stream()
     this.startMug()
     this.video.load()
@@ -192,7 +202,7 @@ class Eplayer extends HTMLElement {
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen()
       }
-      
+
       screen.orientation.lock("portrait-primary")
     } else {
       let el = this.$('.eplayer')
@@ -269,7 +279,7 @@ class Eplayer extends HTMLElement {
           z-index:1;   
         }
         .progress{
-          display:${this.live?'none':'block'};
+          display:${this.live ? 'none' : 'block'};
           position:relative;
           bottom:15px;
           left:0;
@@ -293,7 +303,7 @@ class Eplayer extends HTMLElement {
           color:#fff;
         }
         .time{
-        display:${this.live?'none':'inline-block'};
+        display:${this.live ? 'none' : 'inline-block'};
           position:relative;
           top:-2px;
         }
@@ -510,6 +520,7 @@ class Eplayer extends HTMLElement {
       '.loading',
       '.total',
       '.now',
+      '.time',
       '.current',
       '.buffer',
       '.is-play',

package/docs/index.html

@@ -109,8 +109,7 @@
   <div class="wrapper">
 
     <e-player id="ep" 
-    src="https://a1.alibabausercontent.com/prod/feupload/user/edos8/2f0e7af0-29f1-11ef-b3cd-818e64ac843d.mp4" 
-    live="false">
+    src="https://a1.alibabausercontent.com/prod/feupload/user/edos8/2f0e7af0-29f1-11ef-b3cd-818e64ac843d.mp4">
     </e-player>
 
     <a href="https://github.com/132yse/eplayer">github</a>
@@ -120,6 +119,11 @@
   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
   <script src="https://unpkg.com/hls.js"></script>
   <script src="./eplayer.js"></script>
+  <script>
+    setTimeout(() => {
+      document.querySelector('e-player').setAttribute('live',true)
+    }, 1000);
+  </script>
   <!-- <script src="./pic.js"></script> -->
 </body>
 

package/package.json

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