xgplayer 2.32.5 → 2.32.6

package/es/plugins/error/index.scss

@@ -0,0 +1,34 @@
+@import "../../style/variable";
+
+.xgplayer-error {
+  background: $errorBgColor;
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width:100%;
+  height: 100%;
+  z-index: 6;
+  color: $errorColor;
+  text-align: center;
+  line-height: 100%;
+  justify-content: center;
+  align-items: center;
+  .xgplayer-error-refresh {
+    color: $errorRefreshColor;
+    padding: 0 3px;
+    cursor: pointer;
+  }
+  .xgplayer-error-text {
+    line-height: 18px;
+    margin: auto 6px;
+    display: block;
+    margin-bottom: 20px;
+  }
+}
+
+.xgplayer-is-error {
+  .xgplayer-error {
+    display: flex;
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * @typedef { {
+ *   tick?: number,
+ *   stuckCount?: number,
+ *   disable?: boolean,
+ *   reportFrame?: number
+ * } } IFullscreenConfig
+ */
+export default class FpsDetect extends BasePlugin {
+    static get defaultConfig(): {
+        disabled: boolean;
+        tick: number;
+        stuckCount: number;
+        reportFrame: number;
+    };
+    timer: any;
+    _lastDecodedFrames: any;
+    _currentStuckCount: number;
+    _lastCheckPoint: number;
+    _payload: any[];
+    _startTick(): void;
+    _timer: NodeJS.Timeout;
+    _stopTick(): void;
+    _checkStuck(curDecodedFrames: any, totalVideoFrames: any, droppedVideoFrames: any, checkInterval: any): void;
+    _reset(): void;
+    _checkDecodeFPS(): void;
+}
+export type IFullscreenConfig = {
+    tick?: number;
+    stuckCount?: number;
+    disable?: boolean;
+    reportFrame?: number;
+};
+import BasePlugin from "../../plugin";

package/es/plugins/fpsDetect/index.js

@@ -0,0 +1,149 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
+import { PLAY, PAUSE, ENDED, EMPTIED, FPS_STUCK } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var FpsDetect = /* @__PURE__ */ function(_BasePlugin) {
+  _inherits(FpsDetect2, _BasePlugin);
+  var _super = _createSuper(FpsDetect2);
+  function FpsDetect2() {
+    _classCallCheck(this, FpsDetect2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(FpsDetect2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      var player = this.player, config = this.config;
+      this.timer = null;
+      this._lastDecodedFrames = 0;
+      this._currentStuckCount = 0;
+      this._lastCheckPoint = null;
+      this._payload = [];
+      if (config.disabled)
+        return;
+      var getVideoPlaybackQuality = player.media.getVideoPlaybackQuality;
+      if (!getVideoPlaybackQuality)
+        return;
+      this.on(PLAY, function() {
+        _this._startTick();
+      });
+      this.on(PAUSE, function() {
+        _this._stopTick();
+      });
+      this.on(ENDED, function() {
+        _this._stopTick();
+      });
+      this.on(EMPTIED, function() {
+        _this._stopTick();
+      });
+    }
+  }, {
+    key: "_startTick",
+    value: function _startTick() {
+      var _this2 = this;
+      this._stopTick();
+      this._timer = setTimeout(function() {
+        _this2._checkDecodeFPS();
+        _this2._startTick();
+      }, this.config.tick);
+    }
+  }, {
+    key: "_stopTick",
+    value: function _stopTick() {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }, {
+    key: "_checkStuck",
+    value: function _checkStuck(curDecodedFrames, totalVideoFrames, droppedVideoFrames, checkInterval) {
+      var media = this.player.media;
+      var hidden = document.hidden;
+      var paused = media.paused;
+      if (typeof hidden === "boolean" && !hidden && !paused) {
+        var curTime = media.currentTime;
+        var buffered = media.buffered;
+        var enoughBuffer = false;
+        var bufs = [];
+        for (var i = 0; i < buffered.length; i++) {
+          var start = buffered.start(i);
+          var end = buffered.end(i);
+          bufs.push({
+            start,
+            end
+          });
+          if (start <= curTime && curTime <= end - 1) {
+            enoughBuffer = true;
+            break;
+          }
+        }
+        if (media.readyState === 4 && enoughBuffer) {
+          if (this._currentStuckCount > this.config.stuckCount) {
+            this.emit(FPS_STUCK, this._payload);
+            this._reset();
+          } else {
+            if (curDecodedFrames <= this.config.reportFrame) {
+              this._currentStuckCount++;
+              this._payload.push({
+                bufs,
+                currentTime: media.currentTime,
+                curDecodedFrames,
+                totalVideoFrames,
+                droppedVideoFrames,
+                checkInterval
+              });
+            } else {
+              this._reset();
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "_reset",
+    value: function _reset() {
+      this._payload = [];
+      this._currentStuckCount = 0;
+    }
+  }, {
+    key: "_checkDecodeFPS",
+    value: function _checkDecodeFPS() {
+      if (!this.player.media) {
+        return;
+      }
+      var _this$player$media$ge = this.player.media.getVideoPlaybackQuality(), totalVideoFrames = _this$player$media$ge.totalVideoFrames, droppedVideoFrames = _this$player$media$ge.droppedVideoFrames;
+      var currTime = performance.now();
+      if (totalVideoFrames) {
+        if (this._lastCheckPoint) {
+          var curDecoded = totalVideoFrames - this._lastDecodedFrames;
+          var checkInterval = currTime - this._lastCheckPoint;
+          this._checkStuck(curDecoded, totalVideoFrames, droppedVideoFrames, checkInterval);
+        }
+      }
+      this._lastDecodedFrames = totalVideoFrames;
+      this._lastCheckPoint = currTime;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._stopTick();
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "FpsDetect";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        disabled: false,
+        tick: 1e3,
+        stuckCount: 3,
+        reportFrame: 0
+      };
+    }
+  }]);
+  return FpsDetect2;
+}(Plugin);
+export { FpsDetect as default };

package/es/plugins/fullscreen/backicon.d.ts

@@ -0,0 +1,17 @@
+export default class TopBackIcon extends Plugin {
+    static get defaultConfig(): {
+        position: string;
+        index: number;
+    };
+    onClick: (e: any) => void;
+    registerIcons(): {
+        screenBack: {
+            icon: any;
+            class: string;
+        };
+    };
+    initIcons(): void;
+    show(): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/fullscreen/backicon.js

@@ -0,0 +1,72 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+import BackSVG from "../assets/back.js";
+var TopBackIcon = /* @__PURE__ */ function(_Plugin) {
+  _inherits(TopBackIcon2, _Plugin);
+  var _super = _createSuper(TopBackIcon2);
+  function TopBackIcon2() {
+    _classCallCheck(this, TopBackIcon2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(TopBackIcon2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      this.initIcons();
+      this.onClick = function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        _this.config.onClick(e);
+      };
+      this.bind(["click", "touchend"], this.onClick);
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        screenBack: {
+          icon: BackSVG,
+          class: "xg-fullscreen-back"
+        }
+      };
+    }
+  }, {
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      this.appendChild(this.root, icons.screenBack);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      util.addClass(this.root, "show");
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      util.removeClass(this.root, "show");
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return '<xg-icon class="xgplayer-back">\n    </xg-icon>';
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "topbackicon";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.ROOT_TOP,
+        index: 0
+      };
+    }
+  }]);
+  return TopBackIcon2;
+}(Plugin);
+export { TopBackIcon as default };

package/es/plugins/fullscreen/index.css

@@ -0,0 +1,23 @@
+.xgplayer .xgplayer-fullscreen .xg-exit-fullscreen {
+  display: none;
+}
+.xgplayer .xgplayer-fullscreen .xg-get-fullscreen {
+  display: block;
+}
+.xgplayer .xgplayer-fullscreen[data-state=full] .xg-exit-fullscreen {
+  display: block;
+}
+.xgplayer .xgplayer-fullscreen[data-state=full] .xg-get-fullscreen {
+  display: none;
+}
+.xgplayer .xg-top-bar .xgplayer-back {
+  position: relative;
+  left: 0;
+  top: 16px;
+  width: 34px;
+  height: 40px;
+  display: none;
+}
+.xgplayer .xg-top-bar .xgplayer-back.show {
+  display: block;
+}

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

@@ -0,0 +1,58 @@
+/**
+ * @typedef { {
+ *   position?: string,
+ *   index?: number,
+ *   useCssFullscreen?: boolean,
+ *   rotateFullscreen?: boolean,
+ *   switchCallback?: () => any,
+ *   target?: null | HTMLElement,
+ *   disable?: boolean,
+ *   needBackIcon?: boolean,
+ *   [propName: string]: any
+ * } } IFullscreenConfig
+ */
+export default class Fullscreen extends IconPlugin {
+    /**
+     * @type IFullscreenConfig
+     */
+    static get defaultConfig(): IFullscreenConfig;
+    handleFullscreen: any;
+    topBackIcon: any;
+    /**
+     * @private
+     */
+    private _onOrientationChange;
+    /**
+     * @private
+     */
+    private registerIcons;
+    initIcons(): void;
+    /**
+     * 切换全屏
+     * @param { Event } [e]
+     */
+    toggleFullScreen(e?: Event): void;
+    /**
+     *
+     * @param { boolean } isFullScreen
+     */
+    animate(isFullScreen: boolean): void;
+    show(): void;
+    /**
+     * @private
+     * @returns
+     */
+    private render;
+}
+export type IFullscreenConfig = {
+    [propName: string]: any;
+    position?: string;
+    index?: number;
+    useCssFullscreen?: boolean;
+    rotateFullscreen?: boolean;
+    switchCallback?: () => any;
+    target?: null | HTMLElement;
+    disable?: boolean;
+    needBackIcon?: boolean;
+};
+import IconPlugin from "../common/iconPlugin";

package/es/plugins/fullscreen/index.js

@@ -0,0 +1,202 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import sniffer from "../../utils/sniffer.js";
+import { FULLSCREEN_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
+import { POSITIONS } from "../../plugin/plugin.js";
+import { xgIconTips } from "../common/iconTools.js";
+import Icon from "../common/iconPlugin.js";
+import TopBackIcon from "./backicon.js";
+import FullScreenSvg from "../assets/requestFull.js";
+import ExitFullScreenSvg from "../assets/exitFull.js";
+var Fullscreen = /* @__PURE__ */ function(_IconPlugin) {
+  _inherits(Fullscreen2, _IconPlugin);
+  var _super = _createSuper(Fullscreen2);
+  function Fullscreen2() {
+    var _this;
+    _classCallCheck(this, Fullscreen2);
+    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), "_onOrientationChange", function(e) {
+      if (_this.player.fullscreen && _this.config.rotateFullscreen) {
+        if (window.orientation === 90 || window.orientation === -90) {
+          _this.player.setRotateDeg(0);
+        } else {
+          _this.player.setRotateDeg(90);
+        }
+      }
+    });
+    return _this;
+  }
+  _createClass(Fullscreen2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      _get(_getPrototypeOf(Fullscreen2.prototype), "afterCreate", this).call(this);
+      var config = this.config, playerConfig = this.playerConfig;
+      if (config.disable) {
+        return;
+      }
+      if (config.target) {
+        this.playerConfig.fullscreenTarget = this.config.target;
+      }
+      var fullEl = util.getFullScreenEl();
+      if (playerConfig.fullscreenTarget === fullEl) {
+        this.player.getFullscreen().catch(function(e) {
+        });
+      }
+      this.initIcons();
+      this.handleFullscreen = this.hook("fullscreenChange", this.toggleFullScreen, {
+        pre: function pre(e) {
+          var fullscreen = _this2.player.fullscreen;
+          _this2.emitUserAction(e, "switch_fullscreen", {
+            prop: "fullscreen",
+            from: fullscreen,
+            to: !fullscreen
+          });
+        }
+      });
+      this.bind(".xgplayer-fullscreen", ["touchend", "click"], this.handleFullscreen);
+      this.on(FULLSCREEN_CHANGE, function(isFullScreen) {
+        var tipsDom = _this2.find(".xg-tips");
+        tipsDom && _this2.changeLangTextKey(tipsDom, isFullScreen ? _this2.i18nKeys.EXITFULLSCREEN_TIPS : _this2.i18nKeys.FULLSCREEN_TIPS);
+        _this2.animate(isFullScreen);
+      });
+      if (this.config.needBackIcon) {
+        this.topBackIcon = this.player.registerPlugin({
+          plugin: TopBackIcon,
+          options: {
+            config: {
+              onClick: function onClick(e) {
+                _this2.handleFullscreen(e);
+              }
+            }
+          }
+        });
+      }
+      if (sniffer.device === "mobile") {
+        window.addEventListener("orientationchange", this._onOrientationChange);
+      }
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        fullscreen: {
+          icon: FullScreenSvg,
+          class: "xg-get-fullscreen"
+        },
+        exitFullscreen: {
+          icon: ExitFullScreenSvg,
+          class: "xg-exit-fullscreen"
+        }
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      _get(_getPrototypeOf(Fullscreen2.prototype), "destroy", this).call(this);
+      this.unbind(".xgplayer-icon", sniffer.device === "mobile" ? "touchend" : "click", this.handleFullscreen);
+      if (sniffer.device === "mobile") {
+        window.removeEventListener("orientationchange", this._onOrientationChange);
+      }
+    }
+  }, {
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      this.appendChild(".xgplayer-icon", icons.fullscreen);
+      this.appendChild(".xgplayer-icon", icons.exitFullscreen);
+    }
+  }, {
+    key: "toggleFullScreen",
+    value: function toggleFullScreen(e) {
+      if (e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      var player = this.player, config = this.config;
+      var useCssFullscreen = config.useCssFullscreen === true || typeof config.useCssFullscreen === "function" && config.useCssFullscreen();
+      if (useCssFullscreen) {
+        if (player.fullscreen) {
+          player.exitCssFullscreen();
+        } else {
+          player.getCssFullscreen();
+        }
+        this.animate(player.fullscreen);
+      } else if (config.rotateFullscreen) {
+        if (player.fullscreen) {
+          player.exitRotateFullscreen();
+        } else {
+          player.getRotateFullscreen();
+        }
+        this.animate(player.fullscreen);
+      } else if (config.switchCallback && typeof config.switchCallback === "function") {
+        config.switchCallback(player.fullscreen);
+      } else {
+        if (player.fullscreen) {
+          player.exitFullscreen();
+        } else {
+          player.getFullscreen().catch(function(e2) {
+          });
+        }
+      }
+    }
+  }, {
+    key: "animate",
+    value: function animate(isFullScreen) {
+      isFullScreen ? this.setAttr("data-state", "full") : this.setAttr("data-state", "normal");
+      if (this.topBackIcon) {
+        if (isFullScreen) {
+          this.topBackIcon.show();
+          this.hide();
+        } else {
+          this.topBackIcon.hide();
+          this.show();
+        }
+      }
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      _get(_getPrototypeOf(Fullscreen2.prototype), "show", this).call(this);
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      _get(_getPrototypeOf(Fullscreen2.prototype), "hide", this).call(this);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
+        return;
+      }
+      var langKey = "FULLSCREEN_TIPS";
+      return '<xg-icon class="xgplayer-fullscreen">\n    <div class="xgplayer-icon">\n    </div>\n    '.concat(xgIconTips(this, langKey, this.playerConfig.isHideTips), "\n    </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "fullscreen";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 0,
+        useCssFullscreen: false,
+        rotateFullscreen: false,
+        switchCallback: null,
+        target: null,
+        disable: false,
+        needBackIcon: false
+      };
+    }
+  }]);
+  return Fullscreen2;
+}(Icon);
+export { Fullscreen as default };

package/es/plugins/fullscreen/index.scss

@@ -0,0 +1,35 @@
+.xgplayer {
+  .xgplayer-fullscreen {
+    .xg-exit-fullscreen {
+      display: none;
+    }
+    .xg-get-fullscreen {
+      display: block;
+    }
+
+    &[data-state=full] {
+      .xg-exit-fullscreen {
+        display: block;
+      }
+      .xg-get-fullscreen {
+        display: none;
+      }
+    }
+  }
+  .xg-top-bar {
+    .xgplayer-back {
+      position: relative;
+      left: 0;
+      top: 16px;
+      width: 34px;
+      height: 40px;
+      display: none;
+      // svg {
+      //   display: block;
+      // }
+      &.show {
+        display: block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+declare class GapJump extends BasePlugin {
+    static get defaultConfig(): {
+        useGapJump: boolean;
+        smallGapLimit: number;
+        gapDetectionThreshold: number;
+    };
+    hasPlayed: boolean;
+    seekingEventReceived: boolean;
+    isSafari: boolean;
+    onGapJump: () => void;
+    _getIndex(buffered: any, time: any, threshold: any): number;
+    _getBuffered(b: any): {
+        start: any;
+        end: any;
+    }[];
+}
+declare namespace GapJump {
+    const BROWSER_GAP_TOLERANCE: number;
+}
+export default GapJump;
+import BasePlugin from "../../plugin";