xgplayer 3.1.0-alpha.0 → 3.1.0-alpha.2

package/es/plugins/controls/index.js

@@ -0,0 +1,189 @@
+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 { MINI_STATE_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+import STATE_CLASS from "../../stateClassMap.js";
+var Controls = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Controls2, _Plugin);
+  var _super = _createSuper(Controls2);
+  function Controls2() {
+    var _this;
+    _classCallCheck(this, Controls2);
+    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), "onMouseEnter", function(e) {
+      var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player, playerConfig = _assertThisInitialize.playerConfig;
+      playerConfig.closeControlsBlur && player.focus({
+        autoHide: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function(e) {
+      var _assertThisInitialize2 = _assertThisInitialized(_this), player = _assertThisInitialize2.player;
+      player.focus();
+    });
+    return _this;
+  }
+  _createClass(Controls2, [{
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      if (!args.config.mode && sniffer.device === "mobile") {
+        args.config.mode = "flex";
+      }
+      if (args.player.config.marginControls) {
+        args.config.autoHide = false;
+      }
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      var _this$config = this.config, disable = _this$config.disable, height = _this$config.height, mode = _this$config.mode;
+      if (disable) {
+        return;
+      }
+      mode === "flex" && this.player.addClass(STATE_CLASS.FLEX_CONTROLS);
+      var style = {
+        height: "".concat(height, "px")
+      };
+      Object.keys(style).map(function(key) {
+        _this2.root.style[key] = style[key];
+      });
+      this.left = this.find("xg-left-grid");
+      this.center = this.find("xg-center-grid");
+      this.right = this.find("xg-right-grid");
+      this.innerRoot = this.find("xg-inner-controls");
+      this.on(MINI_STATE_CHANGE, function(isMini) {
+        isMini ? util.addClass(_this2.root, "mini-controls") : util.removeClass(_this2.root, "mini-controls");
+      });
+      var isMobileSimulateMode = this.playerConfig.isMobileSimulateMode;
+      if (sniffer.device !== "mobile" && isMobileSimulateMode !== "mobile") {
+        this.bind("mouseenter", this.onMouseEnter);
+        this.bind("mouseleave", this.onMouseLeave);
+      }
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.player.focus({
+        autoHide: false
+      });
+    }
+  }, {
+    key: "focusAwhile",
+    value: function focusAwhile() {
+      this.player.focus({
+        autoHide: true
+      });
+    }
+  }, {
+    key: "blur",
+    value: function blur() {
+      this.player.blur({
+        ignorePaused: true
+      });
+    }
+  }, {
+    key: "recoverAutoHide",
+    value: function recoverAutoHide() {
+      this.config.autoHide && util.addClass(this.root, STATE_CLASS.CONTROLS_AUTOHIDE);
+    }
+  }, {
+    key: "pauseAutoHide",
+    value: function pauseAutoHide() {
+      util.removeClass(this.root, STATE_CLASS.CONTROLS_AUTOHIDE);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.root.style.display = "";
+      this.player.focus();
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.root.style.display = "none";
+    }
+  }, {
+    key: "mode",
+    get: function get() {
+      return this.config.mode;
+    }
+  }, {
+    key: "registerPlugin",
+    value: function registerPlugin(plugin) {
+      var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+      var name = arguments.length > 2 ? arguments[2] : void 0;
+      if (!this.root) {
+        return;
+      }
+      var defaultConfig = plugin.defaultConfig || {};
+      if (!options.root) {
+        var position = options.position ? options.position : options.config && options.config.position ? options.config.position : defaultConfig.position;
+        switch (position) {
+          case POSITIONS.CONTROLS_LEFT:
+            options.root = this.left;
+            break;
+          case POSITIONS.CONTROLS_RIGHT:
+            options.root = this.right;
+            break;
+          case POSITIONS.CONTROLS_CENTER:
+            options.root = this.center;
+            break;
+          case POSITIONS.CONTROLS:
+            options.root = this.root;
+            break;
+          default:
+            options.root = this.left;
+        }
+        return _get(_getPrototypeOf(Controls2.prototype), "registerPlugin", this).call(this, plugin, options, name);
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (sniffer.device !== "mobile") {
+        this.unbind("mouseenter", this.onMouseEnter);
+        this.unbind("mouseleave", this.onMouseLeave);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$config2 = this.config, mode = _this$config2.mode, autoHide = _this$config2.autoHide, initShow = _this$config2.initShow, disable = _this$config2.disable;
+      if (disable) {
+        return;
+      }
+      var className = util.classNames({
+        "xgplayer-controls": true
+      }, {
+        "flex-controls": mode === "flex"
+      }, {
+        "bottom-controls": mode === "bottom"
+      }, _defineProperty({}, STATE_CLASS.CONTROLS_AUTOHIDE, autoHide), {
+        "xgplayer-controls-initshow": initShow || !autoHide
+      });
+      return '<xg-controls class="'.concat(className, '" unselectable="on">\n    <xg-inner-controls class="xg-inner-controls xg-pos">\n      <xg-left-grid class="xg-left-grid">\n      </xg-left-grid>\n      <xg-center-grid class="xg-center-grid"></xg-center-grid>\n      <xg-right-grid class="xg-right-grid">\n      </xg-right-grid>\n    </xg-inner-controls>\n    </xg-controls>');
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "controls";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        disable: false,
+        autoHide: true,
+        mode: "",
+        initShow: false
+      };
+    }
+  }]);
+  return Controls2;
+}(Plugin);
+export { Controls as default };

package/es/plugins/cssFullScreen/index.js

@@ -1,6 +1,7 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import "../../utils/debug.js";
+import "../../utils/util.js";
 import { CSS_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";

package/es/plugins/danmu/danmuIcon.js

@@ -1,4 +1,5 @@
 import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
 import "../../utils/debug.js";
 import Plugin, { POSITIONS } from "../../plugin/plugin.js";
 import { xgIconTips } from "../common/iconTools.js";

package/es/plugins/danmu/danmuPanel.js

@@ -1,6 +1,6 @@
 import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
 import sniffer from "../../utils/sniffer.js";
-import { hasClass, removeClass, addClass } from "../../utils/util.js";
 import "../../utils/debug.js";
 import Plugin, { POSITIONS } from "../../plugin/plugin.js";
 import PanelIcon from "../assets/panel.js";
@@ -43,7 +43,7 @@ var DanmuPanel = /* @__PURE__ */ function(_Plugin) {
     value: function onToggle(e) {
       e.preventDefault();
       e.stopPropagation();
-      hasClass(this.root, "slider-show") ? removeClass(this.root, "slider-show") : addClass(this.root, "slider-show");
+      util.hasClass(this.root, "slider-show") ? util.removeClass(this.root, "slider-show") : util.addClass(this.root, "slider-show");
     }
   }, {
     key: "destroy",

package/es/plugins/danmu/index.js

@@ -1,6 +1,6 @@
 import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
 import DanmuJs from "danmu.js";
-import { clearTimeout, setTimeout } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import { TIME_UPDATE, PAUSE, PLAY, SEEKING, VIDEO_RESIZE, SEEKED } from "../../events.js";
 import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
@@ -54,14 +54,14 @@ var Danmu = /* @__PURE__ */ function(_Plugin) {
           return;
         }
         if (_this2.intervalId) {
-          clearTimeout(_this2, _this2.intervalId);
+          util.clearTimeout(_this2, _this2.intervalId);
           _this2.intervalId = null;
         }
         var now = window.performance.now();
         if (now - _this2.seekCost > MIN_INTERVAL) {
           _this2.danmujs.start();
         } else {
-          _this2.intervalId = setTimeout(_this2, function() {
+          _this2.intervalId = util.setTimeout(_this2, function() {
             _this2.danmujs.start();
             _this2.intervalId = null;
           }, MIN_INTERVAL);
@@ -164,7 +164,7 @@ var Danmu = /* @__PURE__ */ function(_Plugin) {
       this.isUseClose = false;
       this.show();
       this.resize();
-      setTimeout(this, function() {
+      util.setTimeout(this, function() {
         _this4.danmujs.start();
         if (_this4.player.paused) {
           _this4.danmujs.pause();

package/es/plugins/definition/index.js

@@ -1,5 +1,5 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectSpread2 as _objectSpread2, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import { addClass } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import { DEFINITION_CHANGE } from "../../events.js";
 import "../../utils/debug.js";
 import { POSITIONS } from "../../plugin/plugin.js";
@@ -52,7 +52,7 @@ var DefinitionIcon = /* @__PURE__ */ function(_OptionsIcon) {
       if (!this.config.list || this.config.list.length < 2) {
         return;
       }
-      addClass(this.root, "show");
+      util.addClass(this.root, "show");
     }
   }, {
     key: "initDefinition",

package/es/plugins/download/index.js

@@ -1,6 +1,6 @@
 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 downloadUtil from "downloadjs";
-import { typeOf } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import "../../utils/debug.js";
 import { POSITIONS } from "../../plugin/plugin.js";
 import { xgIconTips } from "../common/iconTools.js";
@@ -20,9 +20,9 @@ var Download = /* @__PURE__ */ function(_IconPlugin) {
       _this.emitUserAction(e, "download");
       var url = _this.playerConfig.url;
       var dUrl = "";
-      if (typeOf(url) === "String") {
+      if (util.typeOf(url) === "String") {
         dUrl = url;
-      } else if (typeOf(url) === "Array" && url.length > 0) {
+      } else if (util.typeOf(url) === "Array" && url.length > 0) {
         dUrl = url[0].src;
       }
       var newUrl = _this.getAbsoluteURL(dUrl);

package/es/plugins/dynamicBg/index.js

@@ -1,6 +1,6 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
 import sniffer from "../../utils/sniffer.js";
-import { setTimeout, requestAnimationFrame, clearTimeout, cancelAnimationFrame, isMSE, typeOf } from "../../utils/util.js";
 import { TIME_UPDATE, COMPLETE, EMPTIED, PLAY, PAUSE, LOADED_DATA, LOAD_START } from "../../events.js";
 import XG_DEBUG from "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
@@ -88,11 +88,11 @@ var DynamicBg = /* @__PURE__ */ function(_Plugin) {
           _this.preTime = _now;
         }
       }
-      _this.frameId = _this._loopType === "timer" ? setTimeout(_assertThisInitialized(_this), _this.start, interval) : requestAnimationFrame(_this.start);
+      _this.frameId = _this._loopType === "timer" ? util.setTimeout(_assertThisInitialized(_this), _this.start, interval) : util.requestAnimationFrame(_this.start);
     });
     _defineProperty(_assertThisInitialized(_this), "stop", function() {
       if (_this.frameId) {
-        _this._loopType === "timer" ? clearTimeout(_assertThisInitialized(_this), _this.frameId) : cancelAnimationFrame(_this.frameId);
+        _this._loopType === "timer" ? util.clearTimeout(_assertThisInitialized(_this), _this.frameId) : util.cancelAnimationFrame(_this.frameId);
         _this.frameId = null;
       }
     });
@@ -229,7 +229,7 @@ var DynamicBg = /* @__PURE__ */ function(_Plugin) {
         return null;
       }
       var _tVideo = video && video instanceof window.HTMLVideoElement ? video : video.canvas ? video.canvas : video.flyVideo ? video.flyVideo : null;
-      if (_tVideo && !(sniffer.browser === "safari" && isMSE(_tVideo))) {
+      if (_tVideo && !(sniffer.browser === "safari" && util.isMSE(_tVideo))) {
         return _tVideo;
       }
       var _tagName = _tVideo ? _tVideo.tagName.toLowerCase() : "";
@@ -243,7 +243,7 @@ var DynamicBg = /* @__PURE__ */ function(_Plugin) {
     value: function renderByPoster() {
       var poster = this.playerConfig.poster;
       if (poster) {
-        var url = typeOf(poster) === "String" ? poster : typeOf(poster.poster) === "String" ? poster.poster : null;
+        var url = util.typeOf(poster) === "String" ? poster : util.typeOf(poster.poster) === "String" ? poster.poster : null;
         this.updateImg(url);
       }
     }

package/es/plugins/enter/index.js

@@ -1,5 +1,5 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import { createDom } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
 var Enter = /* @__PURE__ */ function(_Plugin) {
@@ -13,7 +13,7 @@ var Enter = /* @__PURE__ */ function(_Plugin) {
     key: "render",
     value: function render() {
       var innerHtml = this.config.innerHtml;
-      var root = createDom("xg-enter", "", {}, "xgplayer-enter");
+      var root = util.createDom("xg-enter", "", {}, "xgplayer-enter");
       if (innerHtml && innerHtml instanceof window.HTMLElement) {
         root.appendChild(innerHtml);
       } else if (innerHtml && typeof innerHtml === "string") {

package/es/plugins/error/index.js

@@ -1,6 +1,7 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import "../../utils/debug.js";
+import "../../utils/util.js";
 import { ERROR } from "../../events.js";
+import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
 var ErrorPlugin = /* @__PURE__ */ function(_Plugin) {
   _inherits(ErrorPlugin2, _Plugin);

package/es/plugins/fpsDetect/index.js

@@ -1,6 +1,7 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import "../../utils/debug.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);

package/es/plugins/fullscreen/backicon.js

@@ -1,5 +1,5 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import { addClass, removeClass } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import "../../utils/debug.js";
 import Plugin, { POSITIONS } from "../../plugin/plugin.js";
 import BackSVG from "../assets/back.js";
@@ -41,12 +41,12 @@ var TopBackIcon = /* @__PURE__ */ function(_Plugin) {
   }, {
     key: "show",
     value: function show() {
-      addClass(this.root, "show");
+      util.addClass(this.root, "show");
     }
   }, {
     key: "hide",
     value: function hide() {
-      removeClass(this.root, "show");
+      util.removeClass(this.root, "show");
     }
   }, {
     key: "render",

package/es/plugins/fullscreen/index.js

@@ -1,6 +1,6 @@
 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 { getFullScreenEl } from "../../utils/util.js";
 import { FULLSCREEN_CHANGE } from "../../events.js";
 import "../../utils/debug.js";
 import { POSITIONS } from "../../plugin/plugin.js";
@@ -42,7 +42,7 @@ var Fullscreen = /* @__PURE__ */ function(_IconPlugin) {
       if (config.target) {
         this.playerConfig.fullscreenTarget = this.config.target;
       }
-      var fullEl = getFullScreenEl();
+      var fullEl = util.getFullScreenEl();
       if (playerConfig.fullscreenTarget === fullEl) {
         this.player.getFullscreen().catch(function(e) {
         });

package/es/plugins/gapJump/index.js

@@ -1,6 +1,7 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import "../../utils/debug.js";
+import "../../utils/util.js";
 import { WAITING, PLAY, SEEKING } from "../../events.js";
+import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
 var GapJump = /* @__PURE__ */ function(_BasePlugin) {
   _inherits(GapJump2, _BasePlugin);

package/es/plugins/heatmap/index.css

@@ -0,0 +1,25 @@
+.xg-heatmap {
+  position: absolute;
+  height: 40px;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 10px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+}
+.xg-heatmap .xg-heatmap-canvas {
+  height: 100%;
+  width: 100%;
+}
+.xg-heatmap.xg-heatmap-active-show {
+  opacity: 0;
+}
+.xg-heatmap.xg-heatmap-normal {
+  opacity: 1;
+}
+
+.xgplayer-progress.active .xg-heatmap-active-show {
+  opacity: 1;
+}

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

@@ -0,0 +1,70 @@
+/**
+ * @typedef {{
+*   lineWidth?: number,
+*   dpi?: number,
+*   alpha?: number,
+*   gradient?: Array<number>,
+*   gradientColors?: Array<{ start: number, color:number }>,
+*   strokeStyle?: string,
+*   fillColor?: string,
+*   height?: number,
+*   data?: Array<number>,
+*   maxValue?: number,
+*   minValue?: number,
+*   maxLength?: number,
+*   mode?: string,
+*   [propName: string]: any
+* }} IHeatMapConfig
+*/
+export default class HeatMap extends Plugin {
+    /**
+     * @type IHeatMapConfig
+     */
+    static get defaultConfig(): IHeatMapConfig;
+    constructor(args: any);
+    canvasHeight: number;
+    canvasWidth: number;
+    width: number;
+    height: number;
+    dataFloatLen: number;
+    xData: any[];
+    yData: any[];
+    yMax: number;
+    _duration: number;
+    curData: any[];
+    setConfig(config: any): void;
+    reset(): void;
+    createRoot(): void;
+    root: HTMLElement;
+    canvas: HTMLElement;
+    resize(): void;
+    formatData(data: any, duration: any, minValue: any): any[];
+    _getX(index: any, stepX: any, item: any, width: any): number;
+    _getY(item: any, stepY: any, maxY: any): any;
+    setData(data: any): void;
+    _getFillStyle(ctx: any): any;
+    drawLinePath(): void;
+    clearCanvas(): void;
+    fixFloat(_num: any, _length: any): number;
+    render(): string;
+}
+export type IHeatMapConfig = {
+    [propName: string]: any;
+    lineWidth?: number;
+    dpi?: number;
+    alpha?: number;
+    gradient?: Array<number>;
+    gradientColors?: Array<{
+        start: number;
+        color: number;
+    }>;
+    strokeStyle?: string;
+    fillColor?: string;
+    height?: number;
+    data?: Array<number>;
+    maxValue?: number;
+    minValue?: number;
+    maxLength?: number;
+    mode?: string;
+};
+import Plugin from "../../plugin";