eplayer 1.5.4 → 1.5.6

package/docs/eplayer.js

@@ -4,21 +4,23 @@ class Eplayer extends HTMLElement {
     this.doms = {}
     this.src = this.getAttribute('src')
     this.type = this.getAttribute('type')
-    this.beatMap = this.getAttribute('beatMap')
+    this.beatmap = this.getAttribute('beatmap')
+    this.high = this.getAttribute('high')
 
     this.init()
     this.stream()
   }
-
+  
   static get observedAttributes() {
-    return ['src', 'type', 'beatMap']
+    return ['src', 'type', 'beatmap']
   }
 
   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 === 'beatmap') this.beatmap = newVal
     this.stream()
+    this.startMug()
     this.video.load()
   }
 
@@ -26,14 +28,24 @@ class Eplayer extends HTMLElement {
     return this.doms[key]
   }
 
-
-
   waiting() {
     this.$('.mark').removeEventListener('click', this.mark.bind(this))
     this.$('.mark').classList.remove('playing')
     this.$('.mark').classList.add('loading')
   }
 
+  startMug() {
+    this.$('.mug').style.display = 'block'
+    this.$('.ep-video').style.display = 'none'
+    this.$('.controls').style.display = 'none'
+    if (!this.beatmap) return
+    const beats = this.beatmap.split('|').map(item => {
+      const [fps, button] = item.split(':')
+      return { fps, button }
+    })
+    new Mug(beats, this.$('.mug'), this.video)
+  }
+
   stream() {
     switch (this.type) {
       case 'hls':
@@ -47,24 +59,11 @@ class Eplayer extends HTMLElement {
   }
 
   mark() {
-    if (this.beatMap) return
+    if (this.beatmap) return
     clearTimeout(this.timer)
     this.timer = setTimeout(() => this.play(), 200)
   }
 
-  connectedCallback() {
-    console.log('emmm')
-    const beats = this.beatMap.split('|').map(item => {
-      const [fps, button] = item.split(':')
-      return {
-        fps, button
-      }
-    })
-
-
-    new Mug(beats,this.$('.mug'),this.video)
-  }
-
   canplay() {
     this.$('.mark').classList.remove('loading')
     this.$('.mark').classList.add('playing')
@@ -73,7 +72,7 @@ class Eplayer extends HTMLElement {
   }
 
   play() {
-    if (this.beatMap) return
+    if (this.beatmap) return
     if (this.video.paused) {
       this.video.play()
       this.$('.ep-video').style.display = 'none'
@@ -250,7 +249,7 @@ class Eplayer extends HTMLElement {
           overflow: hidden;
         }
         .controls{
-          display:${this.beatMap ? 'none' : 'block'};
+          display:${this.beatmap ? 'none' : 'block'};
           position:absolute;
           left:0;
           right:0;
@@ -396,7 +395,7 @@ class Eplayer extends HTMLElement {
         }
         .ep-video {
           position: absolute;
-          display:${this.beatMap ? 'none' : 'block'};
+          display:${this.beatmap ? 'none' : 'block'};
           bottom: 25px;
           right: 20px;
           font-size:40px;
@@ -436,8 +435,8 @@ class Eplayer extends HTMLElement {
             display:inline-block;
         }
         .mug {
-          height: 450px;
-          width: 281px;
+          height: ${this.high}px;
+          width: ${this.high/8*5}px;
           position: absolute;
           z-index: 999;
           /* pointer-events: none; */
@@ -445,10 +444,11 @@ class Eplayer extends HTMLElement {
           left: 50%;
           top: 50%;
           opacity: 0.95;
+         display: ${this.beatmap ? 'block' : 'none'}
         }
         .wrap{
           position: relative;
-          height: 450px;
+          // height: ${this.high}px;
         }
       </style>
       <div class="wrap">

package/docs/index.html

@@ -100,10 +100,14 @@
       }
     }
   </style>
+  <script>
+    setTimeout(() => {
+      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"
-      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">
+    <e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4" high="450">
     </e-player>
 
     <a href="https://github.com/132yse/eplayer">github</a>

package/docs/mug.js

@@ -1,3 +1,5 @@
+const assetUrl = 'https://registry.npmmirror.com/eplayer/1.5.4/files/docs/res'
+
 class Mug {
     constructor(beatMap, container, video) {
         this.container = container
@@ -79,7 +81,7 @@ class Mug {
         let gameCeng = new PIXI.Container()
         this.app.stage.addChild(gameCeng)
         //游戏背景
-        let bg = new PIXI.Sprite.fromImage("res/beijing.png")
+        let bg = new PIXI.Sprite.fromImage(`${assetUrl}/beijing.png`)
         gameCeng.addChild(bg)
         //ui图层
         let uiCeng = new PIXI.Container()
@@ -103,7 +105,7 @@ class Mug {
         gameObjectCeng.addChild(scoreCeng)
 
         //点击位置
-        let touming = new PIXI.Sprite.fromImage("res/touming.png")
+        let touming = new PIXI.Sprite.fromImage(`${assetUrl}/touming.png`)
         lineCeng.addChild(touming)
         touming.y = 600
         touming.x = 250
@@ -143,7 +145,7 @@ class Mug {
         scoreTxt.x = 130
         scoreTxt.y = 30
 
-        let startBtn = new PIXI.Sprite.fromImage("res/kaishianniu.png")
+        let startBtn = new PIXI.Sprite.fromImage(`${assetUrl}/kaishianniu.png`)
         uiCeng.addChild(startBtn)
         startBtn.interactive = true
         startBtn.on("pointerdown", () => {
@@ -159,7 +161,7 @@ class Mug {
 
     over() {
         this.video.pause()
-        let gameoverPanel = new PIXI.Sprite.fromImage("res/beiban.png")
+        let gameoverPanel = new PIXI.Sprite.fromImage(`${assetUrl}/beiban.png`)
         this.uiCeng.addChild(gameoverPanel)
         gameoverPanel.x = 20
         gameoverPanel.y = 100
@@ -174,7 +176,7 @@ class Mug {
         scoreTxt.x = 210
         scoreTxt.y = 110
 
-        let restartBtn = new PIXI.Sprite.fromImage("res/fanhuianniu.png")
+        let restartBtn = new PIXI.Sprite.fromImage(`${assetUrl}/fanhuianniu.png`)
         gameoverPanel.addChild(restartBtn)
         restartBtn.x = 185
         restartBtn.y = 330
@@ -201,7 +203,7 @@ function getWorldPosition(displayObject) {
 class Button {
     constructor(imgNumber, gameObjectCeng, uiCeng, lineCeng, animalCeng, buttonX, that) {
         this.gameObjectCeng = gameObjectCeng
-        this.bjt = new PIXI.Sprite.fromImage(`res/bjt${imgNumber}.png`)
+        this.bjt = new PIXI.Sprite.fromImage(`${assetUrl}/bjt${imgNumber}.png`)
         gameObjectCeng.addChild(this.bjt)
         this.bjt.anchor.set(0.5, 1)
         this.bjt.x = buttonX
@@ -209,14 +211,14 @@ class Button {
         this.bjt.visible = false
         this.animalCeng = animalCeng
 
-        this.button = new PIXI.Sprite.fromImage(`res/anniu${imgNumber}.png`)
+        this.button = new PIXI.Sprite.fromImage(`${assetUrl}/anniu${imgNumber}.png`)
         uiCeng.addChild(this.button)
         this.button.anchor.set(0.5, 0.5)
         this.button.y = 754
         this.button.x = this.bjt.x
         this.type = imgNumber
 
-        this.kong = new PIXI.Sprite.fromImage("res/kong.png")
+        this.kong = new PIXI.Sprite.fromImage(`${assetUrl}/kong.png`)
         lineCeng.addChild(this.kong)
         this.kong.anchor.set(0.5, 0.5)
         this.kong.x = this.bjt.x
@@ -310,7 +312,7 @@ class Button {
     }
 
     scoreAction(name) {
-        let score = new PIXI.Sprite.fromImage("res/" + name + ".png")
+        let score = new PIXI.Sprite.fromImage(`${assetUrl}/` + name + ".png")
         this.gameObjectCeng.addChild(score)
         score.y = 540
         score.x = this.bjt.x
@@ -344,7 +346,7 @@ class Animal {
             3: "hong",
             4: "huang"
         }
-        this.animal = new PIXI.Sprite.fromImage(`res/${typeMap[type]}${number}.png`)
+        this.animal = new PIXI.Sprite.fromImage(`${assetUrl}/${typeMap[type]}${number}.png`)
         this.animal.anchor.set(0.5, 0.5)
         this.animal.x = animalX
         this.animal.y = 0

package/package.json

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