Merge branch 'master' into zhangxin109

packages/xgplayer-flv.js/src/flv/core/transmuxer.js

@@ -51,6 +51,10 @@ class Transmuxer {
             this._controller = new TransmuxingController(mediaDataSource, config);
         }
 
+        this._controller._emitter.on('metadata_arrived', onMetaData => {
+          this._emitter.emit('metadata_arrived', onMetaData);
+        })
+
         if (this._controller) {
             let ctl = this._controller;
             ctl.on(TransmuxingEvents.IO_ERROR, this._onIOError.bind(this));
@@ -238,4 +242,4 @@ class Transmuxer {
 
 }
 
-export default Transmuxer;
+export default Transmuxer;

packages/xgplayer-flv.js/src/flv/core/transmuxing-controller.js

@@ -246,6 +246,10 @@ class TransmuxingController {
             // Always create new FLVDemuxer
             this._demuxer = new FLVDemuxer(probeData, this._config);
 
+            this._demuxer._emitter.on('metadata_arrived', onMetaData => {
+              this._emitter.emit('metadata_arrived', onMetaData);
+            })
+
             if (!this._remuxer) {
                 this._remuxer = new MP4Remuxer(this._config);
             }
@@ -425,4 +429,4 @@ class TransmuxingController {
 
 }
 
-export default TransmuxingController;
+export default TransmuxingController;

packages/xgplayer-flv.js/src/flv/demux/flv-demuxer.js

@@ -22,6 +22,7 @@ import SPSParser from './sps-parser.js';
 import DemuxErrors from './demux-errors.js';
 import MediaInfo from '../core/media-info.js';
 import {IllegalStateException} from '../utils/exception.js';
+import EventEmitter from 'events';
 
 function Swap16(src) {
     return (((src >>> 8) & 0xFF) |
@@ -48,6 +49,8 @@ class FLVDemuxer {
     constructor(probeData, config) {
         this.TAG = 'FLVDemuxer';
 
+        this._emitter = new EventEmitter();
+
         this._config = config;
 
         this._onError = null;
@@ -124,6 +127,9 @@ class FLVDemuxer {
         this._onMediaInfo = null;
         this._onTrackMetadata = null;
         this._onDataAvailable = null;
+
+        this._emitter.removeAllListeners();
+        this._emitter = null;
     }
 
     static probe(buffer) {
@@ -358,6 +364,7 @@ class FLVDemuxer {
             }
             this._metadata = scriptData;
             let onMetaData = this._metadata.onMetaData;
+            this._emitter.emit('metadata_arrived', onMetaData);
 
             if (typeof onMetaData.hasAudio === 'boolean') {  // hasAudio
                 if (this._hasAudioFlagOverrided === false) {
@@ -1068,4 +1075,4 @@ class FLVDemuxer {
 
 }
 
-export default FLVDemuxer;
+export default FLVDemuxer;

packages/xgplayer-flv.js/src/flv/player/flv-player.js

@@ -228,6 +228,9 @@ class FlvPlayer {
     this._tempMds = Object.assign({}, this._mediaDataSource, {url})
 
     this._tempTransmuxer = new Transmuxer(this._tempMds, this._config)
+    this._tempTransmuxer._emitter.on('metadata_arrived', onMetaData => {
+      this._emitter.emit('metadata_arrived', onMetaData);
+    })
 
     this._tempTransmuxer.on(TransmuxingEvents.INIT_SEGMENT, (type, is) => {
       if (!this._config.isLive) {
@@ -340,6 +343,9 @@ class FlvPlayer {
     }
 
     this._transmuxer = new Transmuxer(this._mediaDataSource, this._config)
+    this._transmuxer._emitter.on('metadata_arrived', onMetaData => {
+      this._emitter.emit('metadata_arrived', onMetaData);
+    })
 
     this._transmuxer.on(TransmuxingEvents.INIT_SEGMENT, (type, is) => {
       this._msectl.appendInitSegment(is)

packages/xgplayer-hls.js/package.json

@@ -34,7 +34,7 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "deepmerge": "^2.0.1",
     "event-emitter": "^0.3.5",
-    "hls.js": "^0.8.9",
+    "hls.js": "^0.11.0",
     "webpack": "^4.11.0"
   },
   "peerDependency": {

packages/xgplayer/src/control/mobile.js

@@ -44,9 +44,10 @@ let mobile = function () {
   let whitelist = player.config.whitelist
   let pass = whitelistPass(whitelist)
   player.mobilePass = pass
+  let centerBtn = player.config.centerBtn ? player.config.centerBtn : {}
   let iconPath = {
-    pause: 'M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z',
-    play: 'M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z'
+    pause: centerBtn.pausePath ? centerBtn.pausePath : 'M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z',
+    play: centerBtn.playPath ? centerBtn.playPath : 'M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z'
   }
 
   let btn = util.createDom('xg-start', `

packages/xgplayer/src/control/pc.js

@@ -4,9 +4,10 @@ let pc = function () {
   let player = this
   let util = Player.util; let controls = player.controls; let root = player.root
   let clk = 0; let _click_
+  let centerBtn = player.config.centerBtn ? player.config.centerBtn : {}
   let iconPath = {
-    pause: 'M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z',
-    play: 'M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z'
+    pause: centerBtn.pausePath ? centerBtn.pausePath : 'M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z',
+    play: centerBtn.playPath ? centerBtn.playPath : 'M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z'
   }
   let btn = util.createDom('xg-start', `
         <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">

packages/xgplayer/src/control/replay.js

@@ -2,16 +2,26 @@ import Player from '../player'
 
 let replay = function () {
   let player = this; let util = Player.util
+  let centerBtn = player.config.centerBtn ? player.config.centerBtn : {}
+  let iconPath = {
+    replay: centerBtn.replayPath ? centerBtn.replayPath : `M8.22708362,13.8757234 L11.2677371,12.6472196 C11.7798067,12.4403301 12.3626381,12.6877273 12.5695276,13.1997969 L12.9441342,14.1269807 C13.1510237,14.6390502 12.9036264,15.2218816 12.3915569,15.4287712 L6.8284538,17.6764107 L5.90126995,18.0510173 C5.38920044,18.2579068 4.80636901,18.0105096 4.5994795,17.49844 L1.97723335,11.0081531 C1.77034384,10.4960836 2.0177411,9.91325213 2.52981061,9.70636262 L3.45699446,9.33175602 C3.96906396,9.12486652 4.5518954,9.37226378 4.75878491,9.88433329 L5.67885163,12.1615783 C7.99551726,6.6766934 13.3983951,3 19.5,3 C27.7842712,3 34.5,9.71572875 34.5,18 C34.5,26.2842712 27.7842712,33 19.5,33 C15.4573596,33 11.6658607,31.3912946 8.87004692,28.5831991 C8.28554571,27.9961303 8.28762719,27.0463851 8.87469603,26.4618839 C9.46176488,25.8773827 10.4115101,25.8794641 10.9960113,26.466533 C13.2344327,28.7147875 16.263503,30 19.5,30 C26.127417,30 31.5,24.627417 31.5,18 C31.5,11.372583 26.127417,6 19.5,6 C14.4183772,6 9.94214483,9.18783811 8.22708362,13.8757234 Z`
+  }
   let container = util.createDom('xg-replay', `
     <svg class="xgplayer-replay-svg" xmlns="http://www.w3.org/2000/svg" width="78" height="78" viewbox="0 0 78 78">
-      <path d="M8.22708362,13.8757234 L11.2677371,12.6472196 C11.7798067,12.4403301 12.3626381,12.6877273 12.5695276,13.1997969 L12.9441342,14.1269807 C13.1510237,14.6390502 12.9036264,15.2218816 12.3915569,15.4287712 L6.8284538,17.6764107 L5.90126995,18.0510173 C5.38920044,18.2579068 4.80636901,18.0105096 4.5994795,17.49844 L1.97723335,11.0081531 C1.77034384,10.4960836 2.0177411,9.91325213 2.52981061,9.70636262 L3.45699446,9.33175602 C3.96906396,9.12486652 4.5518954,9.37226378 4.75878491,9.88433329 L5.67885163,12.1615783 C7.99551726,6.6766934 13.3983951,3 19.5,3 C27.7842712,3 34.5,9.71572875 34.5,18 C34.5,26.2842712 27.7842712,33 19.5,33 C15.4573596,33 11.6658607,31.3912946 8.87004692,28.5831991 C8.28554571,27.9961303 8.28762719,27.0463851 8.87469603,26.4618839 C9.46176488,25.8773827 10.4115101,25.8794641 10.9960113,26.466533 C13.2344327,28.7147875 16.263503,30 19.5,30 C26.127417,30 31.5,24.627417 31.5,18 C31.5,11.372583 26.127417,6 19.5,6 C14.4183772,6 9.94214483,9.18783811 8.22708362,13.8757234 Z"></path>
+      <path d="${iconPath.replay}"></path>
     </svg>
     <xg-replay-txt class="xgplayer-replay-txt">重播</xg-replay-txt>
     `, {}, 'xgplayer-replay'); let root = player.root
   let btn = container.querySelector('.xgplayer-replay-svg')
   root.appendChild(container)
+
   player.on('ended', function () {
     container.querySelector('.xgplayer-replay-txt').textContent = player.lang.REPLAY
+    let path = container.querySelector('path')
+    let transform = window.getComputedStyle(path).getPropertyValue('transform')
+    if (transform !== 'none') {
+      path.setAttribute('transform', transform)
+    }
     if (!player.config.loop) {
       util.addClass(root, 'replay')
     }

packages/xgplayer/src/control/textTrack.js

@@ -40,7 +40,11 @@ let textTrack = function () {
                 let trackDoms = player.root.getElementsByTagName('Track');
                 if(li.innerHTML === '关闭') {
                     trackDoms[0].track.mode = 'hidden'
+                    util.removeClass(player.root, 'xgplayer-is-textTrack');
                 } else {
+                    if(!util.hasClass(player.root, 'xgplayer-is-textTrack')) {
+                      util.addClass(player.root, 'xgplayer-is-textTrack');
+                    }
                     trackDoms[0].track.mode = 'showing'
 
                     list.some(item => {

packages/xgplayer/src/proxy.js

@@ -292,6 +292,18 @@ class Proxy {
   set volume (vol) {
     this.video.volume = vol
   }
+  get fullscreen () {
+    return util.hasClass(this.root, 'xgplayer-is-fullscreen')
+  }
+  get bullet () {
+    return util.findDom(this.root, 'xg-bullet') ? util.hasClass(util.findDom(this.root, 'xg-bullet'), 'xgplayer-has-bullet') : false
+  }
+  get textTrack () {
+    return util.hasClass(this.root, 'xgplayer-is-textTrack')
+  }
+  get pip () {
+    return util.hasClass(this.root, 'xgplayer-pip-active')
+  }
 }
 
 export default Proxy

packages/xgplayer/src/style/player.scss

@@ -350,7 +350,7 @@
     width: 60px;
     position: relative;
     outline: none;
-    display: none;
+    display: block;
     cursor: pointer;
     margin-left: 10px;
     margin-top: 9px;
@@ -411,9 +411,6 @@
             vertical-align:middle;
         }
     }
-    @at-root .xgplayer-is-textTrack &{
-        display: block;
-    }
 }
 
 .xgplayer-definition{
@@ -571,6 +568,9 @@
         .xgplayer-controls {
             display: none;
         }
+        xg-bullet {
+            display: none;
+        }
         .xgplayer-pip-lay{
             display: block;
         }