wargerm 0.7.45 → 0.7.47

package/dist/components/VideoPlayer/index.d.ts

@@ -5,6 +5,7 @@ declare type propsType = {
         height: number | string;
         width: number | string;
     };
+    onPlayerClose?: <T, S>(index: T, urls: S) => void;
     layouts?: Array<any>;
     layoutIndex?: number;
     config?: Record<any, any>;

package/dist/index.esm.js

@@ -20,7 +20,7 @@ import zhCN$1 from 'antd/es/locale/zh_CN';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import Player from 'xgplayer';
 import FlvPlayer from 'xgplayer-flv.js';
-import HlsJsPlayer from 'xgplayer-hls.js';
+import Hls from 'hls.js';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { use, registerTheme, graphic } from 'echarts/core';
@@ -278,6 +278,36 @@ function _createSuper(Derived) {
   };
 }
 
+function _superPropBase(object, property) {
+  while (!Object.prototype.hasOwnProperty.call(object, property)) {
+    object = _getPrototypeOf(object);
+    if (object === null) break;
+  }
+
+  return object;
+}
+
+function _get() {
+  if (typeof Reflect !== "undefined" && Reflect.get) {
+    _get = Reflect.get;
+  } else {
+    _get = function _get(target, property, receiver) {
+      var base = _superPropBase(target, property);
+
+      if (!base) return;
+      var desc = Object.getOwnPropertyDescriptor(base, property);
+
+      if (desc.get) {
+        return desc.get.call(arguments.length < 3 ? target : receiver);
+      }
+
+      return desc.value;
+    };
+  }
+
+  return _get.apply(this, arguments);
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -8484,6 +8514,327 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
+var util = {};
+
+util.getBrowserVersion = function () {
+  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+
+  if (userAgent.toLowerCase().indexOf("mobile") > -1) {
+    return "Unknown";
+  }
+
+  if (userAgent.indexOf("Firefox") > -1) {
+    var version = userAgent.match(/firefox\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Firefox " + version;
+  } else if (userAgent.indexOf("Edge") > -1) {
+    var _version = userAgent.match(/edge\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Edge " + _version;
+  } else if (userAgent.indexOf("rv:11") > -1) {
+    return "IE 11";
+  } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
+    if (userAgent.indexOf("Opera") > -1) {
+      var _version2 = userAgent.match(/opera\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+      return "Opera " + _version2;
+    }
+
+    if (userAgent.indexOf("OPR") > -1) {
+      var _version3 = userAgent.match(/opr\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+      return "Opera " + _version3;
+    }
+  } else if (userAgent.indexOf("Chrome") > -1) {
+    var _version4 = userAgent.match(/chrome\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Chrome " + _version4;
+  } else if (userAgent.indexOf("Safari") > -1) {
+    var _version5 = userAgent.match(/safari\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Safari " + _version5;
+  } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
+    if (userAgent.indexOf("MSIE") > -1) {
+      var _version6 = userAgent.match(/msie [\d.]+/gi)[0].match(/[\d]+/)[0];
+      return "IE " + _version6;
+    }
+
+    if (userAgent.indexOf("Trident") > -1) {
+      var versionTrident = userAgent.match(/trident\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+
+      var _version7 = parseInt(versionTrident) + 4;
+
+      return "IE " + _version7;
+    }
+  } else {
+    return "Unknown";
+  }
+};
+
+var HlsJsPlayer = /*#__PURE__*/function (_Player) {
+  _inherits(HlsJsPlayer, _Player);
+
+  var _super = _createSuper(HlsJsPlayer);
+
+  function HlsJsPlayer(options) {
+    var _this;
+
+    _classCallCheck(this, HlsJsPlayer);
+
+    _this = _super.call(this, options);
+    _this.hlsOpts = options.hlsOpts || {};
+    _this.hlsOpts.mediaType = _this.config.mediaType;
+    var util$1 = Player.util;
+
+    var player = _assertThisInitialized(_this);
+
+    player.once('complete', function () {
+      if (player.config.isLive) {
+        util$1.addClass(player.root, 'xgplayer-is-live');
+
+        if (!util$1.findDom(player.controls, '.xgplayer-live')) {
+          var live = util$1.createDom('xg-live', player.lang.LIVE || '正在直播', {}, 'xgplayer-live');
+          player.controls.appendChild(live);
+        }
+      }
+    });
+    _this.browser = util.getBrowserVersion();
+
+    if (player.config.useHls === undefined) {
+      if (Player.sniffer.device === 'mobile' && navigator.platform !== 'MacIntel' && navigator.platform !== 'Win32' || _this.browser.indexOf('Safari') > -1) {
+        return _possibleConstructorReturn(_this);
+      }
+    } else if (!player.config.useHls) {
+      return _possibleConstructorReturn(_this);
+    }
+
+    _this._start = _this.start;
+
+    _this.start = function () {
+      if (!window.XgVideoProxy) {
+        _this.root.insertBefore(_this.video, _this.root.firstChild);
+      }
+
+      setTimeout(function () {
+        _this.emit('complete');
+
+        if (_this.danmu && typeof _this.danmu.resize === 'function') {
+          _this.danmu.resize();
+        }
+      }, 1);
+    };
+
+    Number.isFinite = Number.isFinite || function (value) {
+      return typeof value === "number" && isFinite(value);
+    };
+
+    var hls;
+    hls = new Hls(_this.hlsOpts);
+    _this.hls = hls;
+    Object.defineProperty(player, 'src', {
+      get: function get() {
+        return player.currentSrc;
+      },
+      set: function set(url) {
+        util$1.removeClass(player.root, 'xgplayer-is-live');
+        var liveDom = document.querySelector('.xgplayer-live');
+
+        if (liveDom) {
+          liveDom.parentNode.removeChild(liveDom);
+        } // player.config.url = url
+
+
+        player.autoplay = true;
+        var paused = player.paused;
+
+        if (!paused) {
+          player.pause();
+        }
+
+        player.hls.stopLoad();
+        player.hls.detachMedia();
+        player.hls.destroy();
+        player.hls = new Hls(player.hlsOpts);
+        player.register(url);
+        player.once('canplay', function () {
+          player.play().catch(function (err) {});
+        });
+        player.hls.loadSource(url);
+        player.hls.attachMedia(player.video);
+      },
+      configurable: true
+    });
+
+    _this.register(_this.config.url);
+
+    _this.once('complete', function () {
+      hls.attachMedia(player.video);
+
+      if (!player.config.videoInit) {
+        player.once('canplay', function () {
+          player.play().catch(function (err) {});
+        });
+      }
+    });
+
+    _this.once('destroy', function () {
+      hls.stopLoad();
+    });
+
+    return _this;
+  }
+
+  _createClass(HlsJsPlayer, [{
+    key: "switchURL",
+    value: function switchURL(url) {
+      var player = this;
+      player.url = url;
+      player.config.url = url;
+      var curTime = player.currentTime; // player.video.muted = true
+
+      Player.util.addClass(player.root, 'xgplayer-is-enter');
+      player.once('playing', function () {
+        Player.util.removeClass(player.root, 'xgplayer-is-enter'); // player.video.muted = false
+      });
+      player.once('canplay', function () {
+        player.currentTime = curTime;
+        player.play();
+      });
+
+      if (_typeof(player.hls) === 'object') {
+        player.hls.originUrl = url;
+      }
+
+      player.src = url;
+    }
+  }, {
+    key: "register",
+    value: function register(url) {
+      var hls = this.hls;
+      var util = Player.util;
+      var player = this;
+      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+        hls.loadSource(url);
+      });
+      hls.on(Hls.Events.LEVEL_LOADED, function (name, e) {
+        if (!hls.inited) {
+          hls.inited = true;
+
+          if (e && e.details && e.details.live) {
+            util.addClass(player.root, 'xgplayer-is-live');
+
+            if (!util.findDom(player.root, '.xgplayer-live')) {
+              var live = util.createDom('xg-live', player.lang.LIVE || '正在直播', {}, 'xgplayer-live');
+              player.controls.appendChild(live);
+            }
+          }
+        }
+      });
+      hls.on(Hls.Events.ERROR, function (event, data) {
+        player.emit('HLS_ERROR', {
+          errorType: data.type,
+          errorDetails: data.details,
+          errorFatal: data.fatal
+        });
+
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              hls.startLoad();
+              break;
+
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              hls.recoverMediaError();
+              break;
+
+            default:
+              player.emit('error', data);
+          }
+        }
+      });
+
+      this._statistics();
+    }
+  }, {
+    key: "updateURLOnly",
+    value: function updateURLOnly(url) {
+      var player = this;
+      var levelController = player.hls.levelController;
+
+      if (Array.isArray(levelController._levels) && levelController._levels.length > 0) {
+        levelController._levels[0].url = [url];
+      }
+
+      player.config.url = url;
+      player.url = url;
+      player.hls.originUrl = url;
+    }
+  }, {
+    key: "_statistics",
+    value: function _statistics() {
+      var statsInfo = {
+        speed: 0,
+        playerType: "HlsPlayer"
+      };
+      var mediainfo = {
+        videoDataRate: 0,
+        audioDataRate: 0
+      };
+      var hls = this.hls;
+      var player = this;
+      hls.on(Hls.Events.FRAG_LOAD_PROGRESS, function (flag, payload) {
+        statsInfo.speed = payload.stats.loaded / 1000;
+      });
+      hls.on(Hls.Events.FRAG_PARSING_DATA, function (flag, payload) {
+        if (payload.type === 'video') {
+          mediainfo.fps = parseInt(payload.nb / (payload.endPTS - payload.startPTS));
+        }
+      });
+      hls.on(Hls.Events.FRAG_PARSING_INIT_SEGMENT, function (flag, payload) {
+        mediainfo.hasAudio = payload && payload.tracks && payload.tracks.audio ? true : false;
+        mediainfo.hasVideo = payload && payload.tracks && payload.tracks.video ? true : false;
+
+        if (mediainfo.hasAudio && payload.tracks.audio) {
+          var track = payload.tracks.audio;
+          mediainfo.audioChannelCount = track.metadata && track.metadata.channelCount ? track.metadata.channelCount : 0;
+          mediainfo.audioCodec = track.codec;
+        }
+
+        if (mediainfo.hasVideo && payload.tracks.video) {
+          var _track = payload.tracks.video;
+          mediainfo.videoCodec = _track.codec;
+          mediainfo.width = _track.metadata && _track.metadata.width ? _track.metadata.width : 0;
+          mediainfo.height = _track.metadata && _track.metadata.height ? _track.metadata.height : 0;
+        }
+
+        mediainfo.duration = payload.frag && payload.frag.duration ? payload.frag.duration : 0;
+        mediainfo.level = payload.frag && payload.frag.level ? payload.frag.level : 0;
+
+        if (mediainfo.videoCodec || mediainfo.audioCodec) {
+          mediainfo.mimeType = "video/hls; codecs=\"".concat(mediainfo.videoCodec, ";").concat(mediainfo.audioCodec, "\"");
+        }
+
+        player.mediainfo = mediainfo;
+        player.emit("media_info", mediainfo);
+      });
+      this._statisticsTimmer = setInterval(function () {
+        player.emit("statistics_info", statsInfo);
+        statsInfo.speed = 0;
+      }, 1000);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      clearInterval(this._statisticsTimmer);
+
+      if (this.hls) {
+        this.hls.destroy();
+      }
+
+      _get(_getPrototypeOf(HlsJsPlayer.prototype), "destroy", this).call(this);
+    }
+  }]);
+
+  return HlsJsPlayer;
+}(Player);
+
+HlsJsPlayer.isSupported = Hls.isSupported;
+HlsJsPlayer.HlsJs = Hls;
+
 function Xgplay(_ref, fRef) {
   var config = _ref.config,
       type = _ref.type,
@@ -8632,6 +8983,7 @@ function VideoPlayer$1(_ref, ref) {
       layoutIndex = _ref$layoutIndex === void 0 ? 0 : _ref$layoutIndex,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? [] : _ref$url,
+      onPlayerClose = _ref.onPlayerClose,
       _ref$layouts = _ref.layouts,
       layouts = _ref$layouts === void 0 ? basicLayouts : _ref$layouts;
   var allLayouts = layouts;
@@ -8667,6 +9019,12 @@ function VideoPlayer$1(_ref, ref) {
       players = _useState8[0],
       setPlayers = _useState8[1];
 
+  var handleCloseAll = function handleCloseAll() {
+    setPlayers([]);
+    setUrls([]);
+    setCurrentPlayerIndex(0);
+  };
+
   var renderDom = useMemo(function () {
     var arr = new Array(allLayouts[currentLayoutIndex].span).fill(0);
     return arr.map(function (item, index) {
@@ -8688,6 +9046,7 @@ function VideoPlayer$1(_ref, ref) {
 
           arr.splice(index, 1, '');
           setUrls(arr);
+          onPlayerClose && onPlayerClose(index, arr);
         }
       }, /*#__PURE__*/React.createElement(CloseOutlined, null))), /*#__PURE__*/React.createElement(Xgplay$1, {
         setRef: function setRef(ref) {
@@ -8768,6 +9127,7 @@ function VideoPlayer$1(_ref, ref) {
       currentLayoutIndex: currentLayoutIndex,
       currentPlayerIndex: currentPlayerIndex,
       urls: urls,
+      handleCloseAll: handleCloseAll,
       loadCamera: loadCamera
     };
   });

package/dist/index.js

@@ -24,7 +24,7 @@ var zhCN$1 = require('antd/es/locale/zh_CN');
 var weekOfYear = require('dayjs/plugin/weekOfYear');
 var Player = require('xgplayer');
 var FlvPlayer = require('xgplayer-flv.js');
-var HlsJsPlayer = require('xgplayer-hls.js');
+var Hls = require('hls.js');
 var ReactEChartsCore = require('echarts-for-react/lib/core');
 var echarts = require('echarts/core');
 var charts = require('echarts/charts');
@@ -68,7 +68,7 @@ var zhCN__default$1 = /*#__PURE__*/_interopDefaultLegacy(zhCN$1);
 var weekOfYear__default = /*#__PURE__*/_interopDefaultLegacy(weekOfYear);
 var Player__default = /*#__PURE__*/_interopDefaultLegacy(Player);
 var FlvPlayer__default = /*#__PURE__*/_interopDefaultLegacy(FlvPlayer);
-var HlsJsPlayer__default = /*#__PURE__*/_interopDefaultLegacy(HlsJsPlayer);
+var Hls__default = /*#__PURE__*/_interopDefaultLegacy(Hls);
 var ReactEChartsCore__default = /*#__PURE__*/_interopDefaultLegacy(ReactEChartsCore);
 var echarts__namespace = /*#__PURE__*/_interopNamespace(echarts);
 
@@ -322,6 +322,36 @@ function _createSuper(Derived) {
   };
 }
 
+function _superPropBase(object, property) {
+  while (!Object.prototype.hasOwnProperty.call(object, property)) {
+    object = _getPrototypeOf(object);
+    if (object === null) break;
+  }
+
+  return object;
+}
+
+function _get() {
+  if (typeof Reflect !== "undefined" && Reflect.get) {
+    _get = Reflect.get;
+  } else {
+    _get = function _get(target, property, receiver) {
+      var base = _superPropBase(target, property);
+
+      if (!base) return;
+      var desc = Object.getOwnPropertyDescriptor(base, property);
+
+      if (desc.get) {
+        return desc.get.call(arguments.length < 3 ? target : receiver);
+      }
+
+      return desc.value;
+    };
+  }
+
+  return _get.apply(this, arguments);
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -8528,6 +8558,327 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
+var util = {};
+
+util.getBrowserVersion = function () {
+  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+
+  if (userAgent.toLowerCase().indexOf("mobile") > -1) {
+    return "Unknown";
+  }
+
+  if (userAgent.indexOf("Firefox") > -1) {
+    var version = userAgent.match(/firefox\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Firefox " + version;
+  } else if (userAgent.indexOf("Edge") > -1) {
+    var _version = userAgent.match(/edge\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Edge " + _version;
+  } else if (userAgent.indexOf("rv:11") > -1) {
+    return "IE 11";
+  } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
+    if (userAgent.indexOf("Opera") > -1) {
+      var _version2 = userAgent.match(/opera\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+      return "Opera " + _version2;
+    }
+
+    if (userAgent.indexOf("OPR") > -1) {
+      var _version3 = userAgent.match(/opr\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+      return "Opera " + _version3;
+    }
+  } else if (userAgent.indexOf("Chrome") > -1) {
+    var _version4 = userAgent.match(/chrome\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Chrome " + _version4;
+  } else if (userAgent.indexOf("Safari") > -1) {
+    var _version5 = userAgent.match(/safari\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+    return "Safari " + _version5;
+  } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
+    if (userAgent.indexOf("MSIE") > -1) {
+      var _version6 = userAgent.match(/msie [\d.]+/gi)[0].match(/[\d]+/)[0];
+      return "IE " + _version6;
+    }
+
+    if (userAgent.indexOf("Trident") > -1) {
+      var versionTrident = userAgent.match(/trident\/[\d.]+/gi)[0].match(/[\d]+/)[0];
+
+      var _version7 = parseInt(versionTrident) + 4;
+
+      return "IE " + _version7;
+    }
+  } else {
+    return "Unknown";
+  }
+};
+
+var HlsJsPlayer = /*#__PURE__*/function (_Player) {
+  _inherits(HlsJsPlayer, _Player);
+
+  var _super = _createSuper(HlsJsPlayer);
+
+  function HlsJsPlayer(options) {
+    var _this;
+
+    _classCallCheck(this, HlsJsPlayer);
+
+    _this = _super.call(this, options);
+    _this.hlsOpts = options.hlsOpts || {};
+    _this.hlsOpts.mediaType = _this.config.mediaType;
+    var util$1 = Player__default['default'].util;
+
+    var player = _assertThisInitialized(_this);
+
+    player.once('complete', function () {
+      if (player.config.isLive) {
+        util$1.addClass(player.root, 'xgplayer-is-live');
+
+        if (!util$1.findDom(player.controls, '.xgplayer-live')) {
+          var live = util$1.createDom('xg-live', player.lang.LIVE || '正在直播', {}, 'xgplayer-live');
+          player.controls.appendChild(live);
+        }
+      }
+    });
+    _this.browser = util.getBrowserVersion();
+
+    if (player.config.useHls === undefined) {
+      if (Player__default['default'].sniffer.device === 'mobile' && navigator.platform !== 'MacIntel' && navigator.platform !== 'Win32' || _this.browser.indexOf('Safari') > -1) {
+        return _possibleConstructorReturn(_this);
+      }
+    } else if (!player.config.useHls) {
+      return _possibleConstructorReturn(_this);
+    }
+
+    _this._start = _this.start;
+
+    _this.start = function () {
+      if (!window.XgVideoProxy) {
+        _this.root.insertBefore(_this.video, _this.root.firstChild);
+      }
+
+      setTimeout(function () {
+        _this.emit('complete');
+
+        if (_this.danmu && typeof _this.danmu.resize === 'function') {
+          _this.danmu.resize();
+        }
+      }, 1);
+    };
+
+    Number.isFinite = Number.isFinite || function (value) {
+      return typeof value === "number" && isFinite(value);
+    };
+
+    var hls;
+    hls = new Hls__default['default'](_this.hlsOpts);
+    _this.hls = hls;
+    Object.defineProperty(player, 'src', {
+      get: function get() {
+        return player.currentSrc;
+      },
+      set: function set(url) {
+        util$1.removeClass(player.root, 'xgplayer-is-live');
+        var liveDom = document.querySelector('.xgplayer-live');
+
+        if (liveDom) {
+          liveDom.parentNode.removeChild(liveDom);
+        } // player.config.url = url
+
+
+        player.autoplay = true;
+        var paused = player.paused;
+
+        if (!paused) {
+          player.pause();
+        }
+
+        player.hls.stopLoad();
+        player.hls.detachMedia();
+        player.hls.destroy();
+        player.hls = new Hls__default['default'](player.hlsOpts);
+        player.register(url);
+        player.once('canplay', function () {
+          player.play().catch(function (err) {});
+        });
+        player.hls.loadSource(url);
+        player.hls.attachMedia(player.video);
+      },
+      configurable: true
+    });
+
+    _this.register(_this.config.url);
+
+    _this.once('complete', function () {
+      hls.attachMedia(player.video);
+
+      if (!player.config.videoInit) {
+        player.once('canplay', function () {
+          player.play().catch(function (err) {});
+        });
+      }
+    });
+
+    _this.once('destroy', function () {
+      hls.stopLoad();
+    });
+
+    return _this;
+  }
+
+  _createClass(HlsJsPlayer, [{
+    key: "switchURL",
+    value: function switchURL(url) {
+      var player = this;
+      player.url = url;
+      player.config.url = url;
+      var curTime = player.currentTime; // player.video.muted = true
+
+      Player__default['default'].util.addClass(player.root, 'xgplayer-is-enter');
+      player.once('playing', function () {
+        Player__default['default'].util.removeClass(player.root, 'xgplayer-is-enter'); // player.video.muted = false
+      });
+      player.once('canplay', function () {
+        player.currentTime = curTime;
+        player.play();
+      });
+
+      if (_typeof(player.hls) === 'object') {
+        player.hls.originUrl = url;
+      }
+
+      player.src = url;
+    }
+  }, {
+    key: "register",
+    value: function register(url) {
+      var hls = this.hls;
+      var util = Player__default['default'].util;
+      var player = this;
+      hls.on(Hls__default['default'].Events.MEDIA_ATTACHED, function () {
+        hls.loadSource(url);
+      });
+      hls.on(Hls__default['default'].Events.LEVEL_LOADED, function (name, e) {
+        if (!hls.inited) {
+          hls.inited = true;
+
+          if (e && e.details && e.details.live) {
+            util.addClass(player.root, 'xgplayer-is-live');
+
+            if (!util.findDom(player.root, '.xgplayer-live')) {
+              var live = util.createDom('xg-live', player.lang.LIVE || '正在直播', {}, 'xgplayer-live');
+              player.controls.appendChild(live);
+            }
+          }
+        }
+      });
+      hls.on(Hls__default['default'].Events.ERROR, function (event, data) {
+        player.emit('HLS_ERROR', {
+          errorType: data.type,
+          errorDetails: data.details,
+          errorFatal: data.fatal
+        });
+
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls__default['default'].ErrorTypes.NETWORK_ERROR:
+              hls.startLoad();
+              break;
+
+            case Hls__default['default'].ErrorTypes.MEDIA_ERROR:
+              hls.recoverMediaError();
+              break;
+
+            default:
+              player.emit('error', data);
+          }
+        }
+      });
+
+      this._statistics();
+    }
+  }, {
+    key: "updateURLOnly",
+    value: function updateURLOnly(url) {
+      var player = this;
+      var levelController = player.hls.levelController;
+
+      if (Array.isArray(levelController._levels) && levelController._levels.length > 0) {
+        levelController._levels[0].url = [url];
+      }
+
+      player.config.url = url;
+      player.url = url;
+      player.hls.originUrl = url;
+    }
+  }, {
+    key: "_statistics",
+    value: function _statistics() {
+      var statsInfo = {
+        speed: 0,
+        playerType: "HlsPlayer"
+      };
+      var mediainfo = {
+        videoDataRate: 0,
+        audioDataRate: 0
+      };
+      var hls = this.hls;
+      var player = this;
+      hls.on(Hls__default['default'].Events.FRAG_LOAD_PROGRESS, function (flag, payload) {
+        statsInfo.speed = payload.stats.loaded / 1000;
+      });
+      hls.on(Hls__default['default'].Events.FRAG_PARSING_DATA, function (flag, payload) {
+        if (payload.type === 'video') {
+          mediainfo.fps = parseInt(payload.nb / (payload.endPTS - payload.startPTS));
+        }
+      });
+      hls.on(Hls__default['default'].Events.FRAG_PARSING_INIT_SEGMENT, function (flag, payload) {
+        mediainfo.hasAudio = payload && payload.tracks && payload.tracks.audio ? true : false;
+        mediainfo.hasVideo = payload && payload.tracks && payload.tracks.video ? true : false;
+
+        if (mediainfo.hasAudio && payload.tracks.audio) {
+          var track = payload.tracks.audio;
+          mediainfo.audioChannelCount = track.metadata && track.metadata.channelCount ? track.metadata.channelCount : 0;
+          mediainfo.audioCodec = track.codec;
+        }
+
+        if (mediainfo.hasVideo && payload.tracks.video) {
+          var _track = payload.tracks.video;
+          mediainfo.videoCodec = _track.codec;
+          mediainfo.width = _track.metadata && _track.metadata.width ? _track.metadata.width : 0;
+          mediainfo.height = _track.metadata && _track.metadata.height ? _track.metadata.height : 0;
+        }
+
+        mediainfo.duration = payload.frag && payload.frag.duration ? payload.frag.duration : 0;
+        mediainfo.level = payload.frag && payload.frag.level ? payload.frag.level : 0;
+
+        if (mediainfo.videoCodec || mediainfo.audioCodec) {
+          mediainfo.mimeType = "video/hls; codecs=\"".concat(mediainfo.videoCodec, ";").concat(mediainfo.audioCodec, "\"");
+        }
+
+        player.mediainfo = mediainfo;
+        player.emit("media_info", mediainfo);
+      });
+      this._statisticsTimmer = setInterval(function () {
+        player.emit("statistics_info", statsInfo);
+        statsInfo.speed = 0;
+      }, 1000);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      clearInterval(this._statisticsTimmer);
+
+      if (this.hls) {
+        this.hls.destroy();
+      }
+
+      _get(_getPrototypeOf(HlsJsPlayer.prototype), "destroy", this).call(this);
+    }
+  }]);
+
+  return HlsJsPlayer;
+}(Player__default['default']);
+
+HlsJsPlayer.isSupported = Hls__default['default'].isSupported;
+HlsJsPlayer.HlsJs = Hls__default['default'];
+
 function Xgplay(_ref, fRef) {
   var config = _ref.config,
       type = _ref.type,
@@ -8541,7 +8892,7 @@ function Xgplay(_ref, fRef) {
 
     if (ref.current) {
       if ((type === null || type === void 0 ? void 0 : type.indexOf('m3u8')) !== -1) {
-        playerRef.current = new HlsJsPlayer__default['default'](_objectSpread2({
+        playerRef.current = new HlsJsPlayer(_objectSpread2({
           el: ref.current,
           width: '100%',
           height: '100%',
@@ -8676,6 +9027,7 @@ function VideoPlayer$1(_ref, ref) {
       layoutIndex = _ref$layoutIndex === void 0 ? 0 : _ref$layoutIndex,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? [] : _ref$url,
+      onPlayerClose = _ref.onPlayerClose,
       _ref$layouts = _ref.layouts,
       layouts = _ref$layouts === void 0 ? basicLayouts : _ref$layouts;
   var allLayouts = layouts;
@@ -8711,6 +9063,12 @@ function VideoPlayer$1(_ref, ref) {
       players = _useState8[0],
       setPlayers = _useState8[1];
 
+  var handleCloseAll = function handleCloseAll() {
+    setPlayers([]);
+    setUrls([]);
+    setCurrentPlayerIndex(0);
+  };
+
   var renderDom = React.useMemo(function () {
     var arr = new Array(allLayouts[currentLayoutIndex].span).fill(0);
     return arr.map(function (item, index) {
@@ -8732,6 +9090,7 @@ function VideoPlayer$1(_ref, ref) {
 
           arr.splice(index, 1, '');
           setUrls(arr);
+          onPlayerClose && onPlayerClose(index, arr);
         }
       }, /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, null))), /*#__PURE__*/React__default['default'].createElement(Xgplay$1, {
         setRef: function setRef(ref) {
@@ -8812,6 +9171,7 @@ function VideoPlayer$1(_ref, ref) {
       currentLayoutIndex: currentLayoutIndex,
       currentPlayerIndex: currentPlayerIndex,
       urls: urls,
+      handleCloseAll: handleCloseAll,
       loadCamera: loadCamera
     };
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.7.45",
+  "version": "0.7.47",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",
@@ -51,6 +51,7 @@
     "dayjs": "^1.11.7",
     "echarts": "^5.2.2",
     "echarts-for-react": "^3.0.2",
+    "hls.js": "^1.4.12",
     "lodash-es": "^4.17.21",
     "react-countup": "^6.0.0",
     "react-dom": "^17.0.2",
@@ -60,8 +61,7 @@
     "xgplayer": "^2.31.2",
     "xgplayer-flv": "^2.5.1",
     "xgplayer-flv.js": "^2.3.0",
-    "xgplayer-hls": "^2.5.2",
-    "xgplayer-hls.js": "^2.2.2"
+    "xgplayer-hls": "^2.5.2"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.2.0",