xgplayer 2.32.5 → 2.32.6

package/es/plugins/loading/index.d.ts

@@ -0,0 +1,11 @@
+export default Loading;
+declare class Loading extends Plugin {
+    static get defaultConfig(): {
+        position: string;
+    };
+    registerIcons(): {
+        loadingIcon: any;
+    };
+    render(): string;
+}
+import Plugin from "../../plugin/plugin";

package/es/plugins/loading/index.js

@@ -0,0 +1,43 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+import loadingIcon from "../assets/loading.js";
+var Loading = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Loading2, _Plugin);
+  var _super = _createSuper(Loading2);
+  function Loading2() {
+    _classCallCheck(this, Loading2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Loading2, [{
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        loadingIcon
+      };
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      this.appendChild("xg-loading-inner", this.icons.loadingIcon);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return '\n    <xg-loading class="xgplayer-loading">\n      <xg-loading-inner></xg-loading-inner>\n    </xg-loading>';
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "loading";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.ROOT
+      };
+    }
+  }]);
+  return Loading2;
+}(Plugin);
+export { Loading as default };

package/es/plugins/loading/index.scss

@@ -0,0 +1,70 @@
+@import '../../style/variable';
+
+@keyframes loadingRotate {
+  0% {
+    transform: rotate(0);
+  }
+  25% {
+    transform: rotate(90deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loadingDashOffset {
+  0% {
+    stroke-dashoffset: 236;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+xg-loading-inner {
+  display: block;
+  height: 100%;
+  width: 100%;
+  transform-origin: center;
+  animation: loadingRotate 1s 0.1s linear infinite;
+}
+.xgplayer-loading {
+  display: none;
+  width: 70px;
+  height:  70px;
+  overflow: hidden;
+  // transform: scale(0.7);
+  position: absolute;
+  z-index: 10;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  svg, img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.xgplayer-mobile {
+  .xgplayer-loading {
+    width: 50px;
+    height:  50px;
+  }
+}
+
+.xgplayer-isloading {
+  .xgplayer-loading{
+    display: block;
+  }
+}
+
+.xgplayer-nostart,.xgplayer-pause,.xgplayer-is-enter, .xgplayer-is-ended,.xgplayer-is-error {
+  .xgplayer-loading{
+    display: none;
+  }
+}

package/es/plugins/logger/index.d.ts

@@ -0,0 +1,54 @@
+export namespace LOG_TYPES {
+    const LOAD_START: string;
+    const LOADED_DATA: string;
+    const FIRST_FRAME: string;
+    const WAIT_START: string;
+    const WAIT_END: string;
+    const SEEK_START: string;
+    const SEEK_END: string;
+}
+declare class XGLogger extends BasePlugin {
+    static get defaultConfig(): {
+        waitTimeout: number;
+    };
+    _waitType: string | number;
+    newPointTime: number;
+    loadedCostTime: number;
+    startCostTime: number;
+    pt: number;
+    vt: number;
+    fvt: number;
+    _initOnceEvents(): void;
+    _sendFF(endType: any): void;
+    s: number;
+    _onTimeupdate: () => void;
+    _onAutoplayStart: () => void;
+    _onReset: () => void;
+    _state: {
+        autoplayStart: boolean;
+        isFFLoading: boolean;
+        isTimeUpdate: boolean;
+        isFFSend: boolean;
+        isLs: boolean;
+    };
+    _isSeeking: boolean;
+    seekingStart: number;
+    waitingStart: number;
+    fixedWaitingStart: number;
+    _isWaiting: boolean;
+    _waitTimer: any;
+    _waittTimer: any;
+    _onSeeking: () => void;
+    _onSeeked: () => void;
+    _onWaitingLoadStart: () => void;
+    _onWaiting: () => void;
+    _onError: () => void;
+    _startWaitTimeout(): void;
+    _onPlaying: () => void;
+    endState(endType: any): void;
+    suspendSeekingStatus(endType: any): void;
+    suspendWaitingStatus(endType: any): void;
+    emitLog(eventType: any, data: any): void;
+}
+import BasePlugin from "../../plugin";
+export { XGLogger as default };

package/es/plugins/logger/index.js

@@ -0,0 +1,311 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectSpread2 as _objectSpread2 } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import { LOAD_START, LOADED_DATA, SEEKING, SEEKED, DESTROY, URL_CHANGE, PLAYING, CANPLAY, WAITING, ERROR, RESET, AUTOPLAY_STARTED, TIME_UPDATE, XGLOG } from "../../events.js";
+import XG_DEBUG from "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+function now() {
+  return new Date().getTime();
+}
+var LOG_TYPES = {
+  LOAD_START: "loadstart",
+  LOADED_DATA: "loadeddata",
+  FIRST_FRAME: "firstFrame",
+  WAIT_START: "waitingStart",
+  WAIT_END: "waitingEnd",
+  SEEK_START: "seekStart",
+  SEEK_END: "seekEnd"
+};
+var XGLogger = /* @__PURE__ */ function(_BasePlugin) {
+  _inherits(XGLogger2, _BasePlugin);
+  var _super = _createSuper(XGLogger2);
+  function XGLogger2() {
+    var _this;
+    _classCallCheck(this, XGLogger2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_onTimeupdate", function() {
+      _this._state.isTimeUpdate = true;
+      if (_this._state.autoplayStart) {
+        XG_DEBUG.logInfo("[xgLogger]".concat(_this.player.playerId, " _onTimeupdate"));
+        _this._sendFF("onTimeupdate");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onAutoplayStart", function() {
+      XG_DEBUG.logInfo("[xgLogger]".concat(_this.player.playerId, " _onAutoplayStart"));
+      _this._state.autoplayStart = true;
+      _this.vt && _this._sendFF("onAutoplayStart");
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onReset", function() {
+      _this._state = {
+        autoplayStart: false,
+        isFFLoading: false,
+        isTimeUpdate: false,
+        isFFSend: false,
+        isLs: false
+      };
+      _this.vt = 0;
+      _this.pt = 0;
+      _this.fvt = 0;
+      _this.newPointTime = now();
+      _this.loadedCostTime = 0;
+      _this.startCostTime = 0;
+      _this._isSeeking = false;
+      _this.seekingStart = 0;
+      _this.waitingStart = 0;
+      _this.fixedWaitingStart = 0;
+      _this._isWaiting = false;
+      _this._waitTimer && util.clearTimeout(_assertThisInitialized(_this), _this._waitTimer);
+      _this._waittTimer && util.clearTimeout(_assertThisInitialized(_this), _this._waittTimer);
+      _this._waitTimer = null;
+      _this._waittTimer = null;
+      _this._waitType = 0;
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onSeeking", function() {
+      if (_this.seekingStart) {
+        return;
+      }
+      _this.suspendWaitingStatus("seek");
+      _this.seekingStart = now();
+      _this.emitLog(LOG_TYPES.SEEK_START, {
+        start: now()
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onSeeked", function() {
+      _this.suspendSeekingStatus("seeked");
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onWaitingLoadStart", function() {
+      if (_this._isWaiting || _this.vt) {
+        return;
+      }
+      _this._isWaiting = true;
+      _this.waitingStart = now();
+      _this.fixedWaitingStart = now();
+      _this._waitType = 1;
+      _this.emitLog(LOG_TYPES.WAIT_START, {
+        fixedStart: _this.fixedWaitingStart,
+        start: _this.waitingStart,
+        type: 1,
+        endType: "loadstart"
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onWaiting", function() {
+      if (_this._isWaiting || !_this.vt) {
+        return;
+      }
+      _this._isWaiting = true;
+      if (!_this.vt) {
+        _this._waitType = 1;
+      } else if (_this.seekingStart) {
+        _this._waitType = 2;
+      } else {
+        _this._waitType = 0;
+      }
+      _this.fixedWaitingStart = now();
+      _this._waitTimer = util.setTimeout(_assertThisInitialized(_this), function() {
+        if (_this._isWaiting) {
+          _this.waitingStart = now();
+          util.clearTimeout(_assertThisInitialized(_this), _this._waitTimer);
+          _this._waitTimer = null;
+          _this._startWaitTimeout();
+          _this.emitLog(LOG_TYPES.WAIT_START, {
+            fixedStart: _this.fixedWaitingStart,
+            start: _this.waitingStart,
+            type: _this._waitType,
+            endType: _this._waitType === 2 ? "seek" : "playing"
+          });
+        }
+      }, 200);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onError", function() {
+      _this.suspendSeekingStatus("error");
+      _this.suspendWaitingStatus("error");
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onPlaying", function() {
+      _this._isWaiting && _this.suspendWaitingStatus("playing");
+    });
+    return _this;
+  }
+  _createClass(XGLogger2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      this._onReset();
+      this._waitType = "firstFrame";
+      this._initOnceEvents();
+      this.newPointTime = now();
+      this.loadedCostTime = 0;
+      this.startCostTime = 0;
+      this.on(LOAD_START, function() {
+        var _state = _this2._state;
+        var autoplayStart = _state.autoplayStart, isFFSend = _state.isFFSend;
+        _this2.startCostTime = now() - _this2.newPointTime;
+        XG_DEBUG.logInfo("[xgLogger]".concat(_this2.player.playerId, " LOAD_START"), "autoplayStart:".concat(autoplayStart, " isFFSend:").concat(isFFSend, " startCostTime:").concat(_this2.startCostTime, " newPointTime").concat(_this2.newPointTime));
+        if (isFFSend) {
+          return;
+        }
+        !_state.isLs && _this2.emitLog(LOG_TYPES.LOAD_START, {});
+        _state.isLs = true;
+        _state.isTimeUpdate = false;
+        _state.isFFLoading = true;
+        _this2.pt = now();
+        _this2.vt = 0;
+        _this2.fvt = 0;
+        _this2._initOnceEvents();
+        _this2._onWaitingLoadStart();
+      });
+      this.on(LOADED_DATA, function() {
+        _this2.vt = now();
+        _this2.fvt = _this2.vt - _this2.pt;
+        _this2.loadedCostTime = _this2.vt - _this2.newPointTime;
+        var _this2$_state = _this2._state, isTimeUpdate = _this2$_state.isTimeUpdate, isFFSend = _this2$_state.isFFSend, autoplayStart = _this2$_state.autoplayStart;
+        XG_DEBUG.logInfo("[xgLogger]".concat(_this2.player.playerId, " LOADED_DATA"), "fvt:".concat(_this2.fvt, " isTimeUpdate:").concat(_this2._state.isTimeUpdate, " loadedCostTime:").concat(_this2.loadedCostTime));
+        if (isTimeUpdate || autoplayStart) {
+          _this2._sendFF("loadedData");
+        }
+        if (!isFFSend) {
+          _this2.emitLog(LOG_TYPES.LOADED_DATA, {});
+        }
+        _this2.suspendWaitingStatus("loadeddata");
+      });
+      this.on(SEEKING, this._onSeeking);
+      this.on(SEEKED, this._onSeeked);
+      this.on(DESTROY, function() {
+        _this2.endState("destroy");
+      });
+      this.on(URL_CHANGE, function() {
+        _this2.endState("urlChange");
+        XG_DEBUG.logInfo("[xgLogger]".concat(_this2.player.playerId, " URL_CHANGE"));
+        _this2._state.isFFSend && _this2._onReset();
+      });
+      this.on([PLAYING, CANPLAY], this._onPlaying);
+      this.on(WAITING, this._onWaiting);
+      this.on(ERROR, this._onError);
+      this.on(RESET, function() {
+        XG_DEBUG.logInfo("[xgLogger]".concat(_this2.player.playerId, " RESET"));
+        _this2.endState("reset");
+        _this2._initOnceEvents();
+        _this2._onReset();
+      });
+    }
+  }, {
+    key: "_initOnceEvents",
+    value: function _initOnceEvents() {
+      this.off(AUTOPLAY_STARTED, this._onAutoplayStart);
+      this.off(TIME_UPDATE, this._onTimeupdate);
+      this.once(AUTOPLAY_STARTED, this._onAutoplayStart);
+      this.once(TIME_UPDATE, this._onTimeupdate);
+    }
+  }, {
+    key: "_sendFF",
+    value: function _sendFF(endType) {
+      this.s = now();
+      var _this$_state = this._state, isFFLoading = _this$_state.isFFLoading, isFFSend = _this$_state.isFFSend;
+      XG_DEBUG.logInfo("[xgLogger]".concat(this.player.playerId, " _sendFF"), "".concat(endType, " fvt:").concat(this.fvt, " isFFLoading:").concat(isFFLoading, " !isFFSend:").concat(!isFFSend));
+      if (this.vt > 0 && isFFLoading && !isFFSend) {
+        XG_DEBUG.logInfo("[xgLogger]".concat(this.player.playerId, " emitLog_firstFrame"), endType);
+        this._state.isFFLoading = false;
+        this._state.isFFSend = true;
+        this.emitLog(LOG_TYPES.FIRST_FRAME, {
+          fvt: this.fvt,
+          costTime: this.fvt,
+          vt: this.vt,
+          startCostTime: this.startCostTime,
+          loadedCostTime: this.loadedCostTime
+        });
+      }
+    }
+  }, {
+    key: "_startWaitTimeout",
+    value: function _startWaitTimeout() {
+      var _this3 = this;
+      if (this._waittTimer) {
+        util.clearTimeout(this, this._waittTimer);
+      }
+      this._waittTimer = util.setTimeout(this, function() {
+        _this3.suspendWaitingStatus("timeout");
+        util.clearTimeout(_this3, _this3._waittTimer);
+        _this3._waittTimer = null;
+      }, this.config.waitTimeout);
+    }
+  }, {
+    key: "endState",
+    value: function endState(endType) {
+      this.suspendWaitingStatus(endType);
+      this.suspendSeekingStatus(endType);
+    }
+  }, {
+    key: "suspendSeekingStatus",
+    value: function suspendSeekingStatus(endType) {
+      if (!this.seekingStart) {
+        return;
+      }
+      var _now = now();
+      var _cost = _now - this.seekingStart;
+      this.seekingStart = 0;
+      this.emitLog(LOG_TYPES.SEEK_END, {
+        end: _now,
+        costTime: _cost,
+        endType
+      });
+    }
+  }, {
+    key: "suspendWaitingStatus",
+    value: function suspendWaitingStatus(endType) {
+      if (this._waitTimer) {
+        util.clearTimeout(this, this._waitTimer);
+        this._waitTimer = null;
+      }
+      if (this._waittTimer) {
+        util.clearTimeout(this, this._waittTimer);
+        this._waittTimer = null;
+      }
+      this._isWaiting = false;
+      if (!this.waitingStart) {
+        return;
+      }
+      var _now = now();
+      var _cost = _now - this.waitingStart;
+      var _fixedCost = _now - this.fixedWaitingStart;
+      var waitTimeout = this.config.waitTimeout;
+      this._isWaiting = false;
+      this.waitingStart = 0;
+      this.fixedWaitingStart = 0;
+      this.emitLog(LOG_TYPES.WAIT_END, {
+        fixedCostTime: _fixedCost > waitTimeout ? waitTimeout : _fixedCost,
+        costTime: _cost > waitTimeout ? waitTimeout : _cost,
+        type: endType === "loadeddata" ? 1 : this._waitType,
+        endType: this._waitType === 2 ? "seek" : endType
+      });
+    }
+  }, {
+    key: "emitLog",
+    value: function emitLog(eventType, data) {
+      var player = this.player;
+      this.emit(XGLOG, _objectSpread2({
+        t: now(),
+        host: util.getHostFromUrl(player.currentSrc),
+        vtype: player.vtype,
+        eventType,
+        currentTime: this.player.currentTime,
+        readyState: player.video.readyState,
+        networkState: player.video.networkState
+      }, data));
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "xgLogger";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        waitTimeout: 1e4
+      };
+    }
+  }]);
+  return XGLogger2;
+}(Plugin);
+export { LOG_TYPES, XGLogger as default };

package/es/plugins/miniScreen/index.css

@@ -0,0 +1,179 @@
+.xg-mini-layer {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 11;
+  background: linear-gradient(180deg, rgba(57, 57, 57, 0.9), rgba(57, 57, 57, 0) 50.27%);
+}
+.xg-mini-layer .mask {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.xg-mini-layer xg-mini-header {
+  display: flex;
+  top: 0;
+  left: 0;
+  right: 40px;
+  box-sizing: border-box;
+  padding: 10px 3px 0 8px;
+  justify-content: space-between;
+  color: #ffffff;
+  font-size: 14px;
+  position: absolute;
+  z-index: 22;
+}
+.xg-mini-layer xg-mini-header .xgplayer-pip-disableBtn {
+  pointer-events: all;
+}
+.xg-mini-layer xg-mini-header #disabledMini {
+  display: none;
+  position: relative;
+}
+.xg-mini-layer xg-mini-header #disabledMini + label {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.xg-mini-layer xg-mini-header #disabledMini + label::before {
+  content: "";
+  color: #ff142b;
+  background-color: transparent;
+  border-radius: 2px;
+  border: solid 1px #cdcdcd;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 16px;
+  margin-right: 7px;
+}
+.xg-mini-layer xg-mini-header #disabledMini:checked + label {
+  color: #ff142b;
+}
+.xg-mini-layer xg-mini-header #disabledMini:checked + label::before {
+  border-color: #ff142b;
+}
+.xg-mini-layer xg-mini-header #disabledMini:checked + label:after {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 8px;
+  border-color: #ff142b;
+  border-style: solid;
+  border-width: 0px 2px 2px 0px;
+  transform: rotate(45deg);
+  left: 6px;
+  top: 5px;
+}
+.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn xg-tips {
+  position: absolute;
+  padding: 4px 6px;
+  white-space: nowrap;
+  bottom: -30px;
+  right: 15px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.54);
+  display: none;
+}
+.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label::before {
+  border-color: #ff142b;
+}
+.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label {
+  color: #ff142b;
+}
+.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover xg-tips {
+  display: block;
+}
+.xg-mini-layer .mini-cancel-btn {
+  cursor: pointer;
+  display: block;
+  color: #fff;
+  width: 40px;
+  height: 38px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-align: center;
+  line-height: 38px;
+}
+.xg-mini-layer .play-icon {
+  cursor: pointer;
+  height: 48px;
+  width: 48px;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.54);
+  border-radius: 24px;
+  top: 50%;
+  left: 50%;
+  margin: -24px 0 0 -24px;
+}
+.xg-mini-layer .play-icon svg, .xg-mini-layer .play-icon img {
+  width: 50px;
+  height: 50px;
+  fill: #faf7f7;
+}
+.xg-mini-layer .xg-icon-play {
+  display: none;
+}
+.xg-mini-layer .xg-icon-pause {
+  display: block;
+}
+.xg-mini-layer[data-state=pause] .xg-icon-play {
+  display: block;
+}
+.xg-mini-layer[data-state=pause] .xg-icon-pause {
+  display: none;
+}
+.xgplayer-miniicon {
+  position: relative;
+  outline: none;
+  display: block;
+}
+.xgplayer-miniicon .name {
+  text-align: center;
+  font-size: 13px;
+  line-height: 20px;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 40px;
+}
+.xgplayer-miniicon .name span {
+  font-size: 13px;
+  width: 60px;
+  height: 20px;
+  line-height: 20px;
+  background: rgba(0, 0, 0, 0.38);
+  border-radius: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.xgplayer-mini {
+  position: fixed;
+  width: 320px;
+  height: 180px;
+  z-index: 91;
+  box-shadow: 0 4px 7px 2px rgba(0, 0, 0, 0.2);
+}
+.xgplayer-mini:hover {
+  cursor: move;
+}
+.xgplayer-mini:hover .xg-mini-layer {
+  display: block;
+}
+.xgplayer-mini.xgplayer-ended .xg-mini-layer {
+  display: none;
+}
+.xgplayer-mobile .xg-mini-layer .play-icon {
+  background: none;
+  border-radius: initial;
+}