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

package/es/plugins/heatmap/index.js

@@ -0,0 +1,306 @@
+import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck, objectSpread2 as _objectSpread2 } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import { VIDEO_RESIZE, DURATION_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var HeatMap = /* @__PURE__ */ function(_Plugin) {
+  _inherits(HeatMap2, _Plugin);
+  var _super = _createSuper(HeatMap2);
+  function HeatMap2(args) {
+    var _this;
+    _classCallCheck(this, HeatMap2);
+    _this = _super.call(this, args);
+    _this.canvasHeight = 0;
+    _this.canvasWidth = 0;
+    _this.width = 0;
+    _this.height = 0;
+    _this.dataFloatLen = 2;
+    _this.xData = [];
+    _this.yData = [];
+    _this.yMax = 0;
+    _this._duration = 0;
+    _this.curData = [];
+    return _this;
+  }
+  _createClass(HeatMap2, [{
+    key: "afterPlayerInit",
+    value: function afterPlayerInit() {
+      if (this.root) {
+        return;
+      }
+      this.createRoot();
+      this.reset();
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      this.on(VIDEO_RESIZE, function() {
+        _this2.resize();
+      });
+      this.on(DURATION_CHANGE, function() {
+        _this2._duration = _this2.player.duration;
+        _this2.reset();
+      });
+    }
+  }, {
+    key: "setConfig",
+    value: function setConfig(config) {
+      var _this3 = this;
+      Object.keys(config).forEach(function(key) {
+        _this3.config[key] = config[key];
+      });
+      this.reset();
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      var data = this.config.data;
+      this.setData(data);
+      this.resize();
+    }
+  }, {
+    key: "createRoot",
+    value: function createRoot() {
+      if (this.root) {
+        return;
+      }
+      var mode = this.config.mode;
+      var progress = this.player.plugins.progress;
+      var parent = progress.root;
+      var _class = mode === "activeShow" ? "xg-heatmap-active-show" : "xg-heatmap-normal";
+      var root = util.createDom("div", "", {}, "xg-heatmap ".concat(_class));
+      var c = parent.children.length > 0 ? parent.children[0] : null;
+      parent.insertBefore(root, c);
+      this.root = root;
+      var canvas = util.createDom("canvas", "", {}, "xg-heatmap-canvas");
+      this.root.appendChild(canvas);
+      this.root.style.height = "".concat(this.config.height, "px");
+      this.canvas = canvas;
+    }
+  }, {
+    key: "resize",
+    value: function resize() {
+      var dpi = this.config.dpi;
+      var _this$root$getBoundin = this.root.getBoundingClientRect(), width = _this$root$getBoundin.width, height = _this$root$getBoundin.height;
+      if (width === this.width && height * dpi === this.height) {
+        return;
+      }
+      this.width = width;
+      this.height = height;
+      this.canvas.width = this.canvasWidth = width * dpi;
+      this.canvas.height = this.canvasHeight = height * dpi;
+      this.yMax = 0;
+      if (this.curData.length) {
+        this.setData();
+        this.drawLinePath();
+      }
+    }
+  }, {
+    key: "formatData",
+    value: function formatData(data, duration, minValue) {
+      var nData = [];
+      if (data.length < 1) {
+        return nData;
+      }
+      var totalDur = parseInt(duration * 1e3, 10);
+      if (util.typeOf(data[0]) === "Object" && data[0].time !== void 0) {
+        if (!totalDur) {
+          return nData;
+        }
+        var step = 1;
+        var lastTime = 0;
+        data.forEach(function(item) {
+          var dur = parseInt(item.time * 1e3, 10);
+          if (lastTime && (step < 0 || item.time - lastTime < step)) {
+            step = item.time - lastTime;
+          }
+          lastTime = item.time;
+          nData.push(_objectSpread2(_objectSpread2({}, item), {}, {
+            percent: dur / totalDur
+          }));
+        });
+        var fTime = nData[0].time;
+        if (fTime > 0) {
+          var arr = fTime - step > 0 ? [fTime - step, 0] : [0];
+          arr.forEach(function(time) {
+            var dur = parseInt(time * 1e3, 10);
+            nData.unshift({
+              time,
+              score: minValue,
+              percent: dur / totalDur
+            });
+          });
+        }
+        var last = nData[nData.length - 1];
+        if (duration - last.time > step) {
+          [last.time + step, duration].forEach(function(item) {
+            var dur = parseInt(item * 1e3, 10);
+            nData.push({
+              time: item,
+              score: minValue,
+              percent: dur / totalDur
+            });
+          });
+        }
+      } else {
+        data.forEach(function(item) {
+          nData.push(item);
+        });
+      }
+      return nData;
+    }
+  }, {
+    key: "_getX",
+    value: function _getX(index, stepX, item, width) {
+      if (item.percent !== void 0) {
+        return this.fixFloat(width * item.percent, this.dataFloatLen);
+      } else {
+        return this.fixFloat((index - 1) * stepX, this.dataFloatLen);
+      }
+    }
+  }, {
+    key: "_getY",
+    value: function _getY(item, stepY, maxY) {
+      var _this$config = this.config, maxValue = _this$config.maxValue, minValue = _this$config.minValue;
+      var y = minValue;
+      y = item.score !== void 0 ? item.score : item;
+      y = Math.min(y, maxValue);
+      y = Math.max(y, minValue);
+      y = y / stepY;
+      y = 1 - y;
+      y = this.fixFloat(y * maxY, this.dataFloatLen);
+      return y;
+    }
+  }, {
+    key: "setData",
+    value: function setData(data) {
+      var _this$config2 = this.config, maxValue = _this$config2.maxValue, minValue = _this$config2.minValue, maxLength = _this$config2.maxLength;
+      if (data && data.length) {
+        this.curData = this.formatData(data, this._duration, minValue);
+      }
+      data = this.curData;
+      if (data.length < 1) {
+        return;
+      }
+      this.xData = [];
+      this.yData = [];
+      this.yMax = 0;
+      var max = maxValue;
+      var min = minValue;
+      var step_V = max - min;
+      var step_Y = this.canvasHeight;
+      var curDataLength = data.length;
+      var step_D = curDataLength > maxLength ? this.fixFloat(curDataLength / maxLength, this.dataFloatLen) : 1;
+      curDataLength = parseInt(curDataLength / step_D);
+      var step_X = this.canvasWidth / (curDataLength - 1);
+      step_X = this.fixFloat(step_X, this.dataFloatLen);
+      if (Number.isNaN(step_X)) {
+        return;
+      }
+      var i = parseInt(this.fixFloat(step_D - 1, 0));
+      var j = 0;
+      while (j < curDataLength) {
+        var x = this._getX(j, step_X, data[i], this.canvasWidth);
+        this.xData.push(x);
+        var y = this._getY(data[i], step_V, step_Y);
+        this.yMax = Math.max(this.yMax, step_Y - y);
+        this.yData.push(y);
+        j++;
+        i = parseInt(this.fixFloat(j * step_D, 0));
+      }
+    }
+  }, {
+    key: "_getFillStyle",
+    value: function _getFillStyle(ctx) {
+      var _this$config3 = this.config, gradient = _this$config3.gradient, gradientColors = _this$config3.gradientColors, fillStyle = _this$config3.fillStyle;
+      var fStyle = fillStyle;
+      if (gradient && gradient.length === 4) {
+        var gradientStyle = ctx.createLinearGradient(gradient[0], gradient[1], gradient[2], gradient[3]);
+        if (gradientColors.length < 2) {
+          console.warn(this.pluginName, "\u6E10\u53D8\u989C\u8272\u914D\u7F6EgradientColors\u5F02\u5E38");
+        } else {
+          gradientColors.forEach(function(item) {
+            gradientStyle.addColorStop(item.start, item.color);
+          });
+          fStyle = gradientStyle;
+        }
+      }
+      return fStyle;
+    }
+  }, {
+    key: "drawLinePath",
+    value: function drawLinePath() {
+      this.clearCanvas();
+      var ctx = this.canvas.getContext("2d");
+      var xData = this.xData, yData = this.yData;
+      var x, y;
+      var i = 0;
+      var _this$config4 = this.config, lineWidth = _this$config4.lineWidth, alpha = _this$config4.alpha, strokeStyle = _this$config4.strokeStyle;
+      var fillStyle = this._getFillStyle(ctx);
+      ctx.beginPath();
+      ctx.lineWidth = lineWidth;
+      ctx.globalAlpha = alpha;
+      ctx.strokeStyle = strokeStyle || fillStyle;
+      ctx.fillStyle = fillStyle;
+      ctx.moveTo(0, this.canvasHeight);
+      x = xData[i];
+      y = yData[i];
+      while (x !== void 0 && y !== void 0) {
+        ctx.lineTo(x, y);
+        i++;
+        x = xData[i];
+        y = yData[i];
+      }
+      ctx.lineTo(this.canvasWidth, this.canvasHeight);
+      ctx.closePath();
+      ctx.stroke();
+      ctx.fill();
+    }
+  }, {
+    key: "clearCanvas",
+    value: function clearCanvas() {
+      this.canvas.width = this.canvasWidth;
+      this.canvas.height = this.canvasHeight;
+    }
+  }, {
+    key: "fixFloat",
+    value: function fixFloat(_num, _length) {
+      if (typeof _num === "number") {
+        return parseFloat(_num.toFixed(_length));
+      }
+      return NaN;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return "";
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "heatmap";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        lineWidth: 0,
+        dpi: 2,
+        alpha: 0.7,
+        gradient: [],
+        gradientColors: [],
+        strokeStyle: "",
+        fillColor: "#FA1F41",
+        height: 20,
+        data: [],
+        maxValue: 100,
+        minValue: 0,
+        maxLength: 400,
+        mode: "activeShow"
+      };
+    }
+  }]);
+  return HeatMap2;
+}(Plugin);
+export { HeatMap as default };

package/es/plugins/heatmap/index.scss

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

package/es/plugins/keyboard/index.js

@@ -1,5 +1,5 @@
 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 { getCurrentTimeByOffset } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import { SHORTCUT } from "../../events.js";
 import BasePlugin from "../../plugin/basePlugin.js";
 import "delegate";
@@ -242,7 +242,7 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
       } else {
         _time = _duration;
       }
-      var _seekTime = getCurrentTimeByOffset(_time, timeSegments);
+      var _seekTime = util.getCurrentTimeByOffset(_time, timeSegments);
       var props = {
         currentTime: {
           from: currentTime,
@@ -264,7 +264,7 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
       if (_seekTime < 0) {
         _seekTime = 0;
       }
-      _seekTime = getCurrentTimeByOffset(_seekTime, timeSegments);
+      _seekTime = util.getCurrentTimeByOffset(_seekTime, timeSegments);
       var props = {
         currentTime: {
           from: currentTime,

package/es/plugins/logger/index.js

@@ -1,5 +1,5 @@
 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 { clearTimeout, setTimeout, getHostFromUrl } from "../../utils/util.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";
@@ -56,8 +56,8 @@ var XGLogger = /* @__PURE__ */ function(_BasePlugin) {
       _this.waitingStart = 0;
       _this.fixedWaitingStart = 0;
       _this._isWaiting = false;
-      _this._waitTimer && clearTimeout(_assertThisInitialized(_this), _this._waitTimer);
-      _this._waittTimer && clearTimeout(_assertThisInitialized(_this), _this._waittTimer);
+      _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;
@@ -103,10 +103,10 @@ var XGLogger = /* @__PURE__ */ function(_BasePlugin) {
         _this._waitType = 0;
       }
       _this.fixedWaitingStart = now();
-      _this._waitTimer = setTimeout(_assertThisInitialized(_this), function() {
+      _this._waitTimer = util.setTimeout(_assertThisInitialized(_this), function() {
         if (_this._isWaiting) {
           _this.waitingStart = now();
-          clearTimeout(_assertThisInitialized(_this), _this._waitTimer);
+          util.clearTimeout(_assertThisInitialized(_this), _this._waitTimer);
           _this._waitTimer = null;
           _this._startWaitTimeout();
           _this.emitLog(LOG_TYPES.WAIT_START, {
@@ -221,11 +221,11 @@ var XGLogger = /* @__PURE__ */ function(_BasePlugin) {
     value: function _startWaitTimeout() {
       var _this3 = this;
       if (this._waittTimer) {
-        clearTimeout(this, this._waittTimer);
+        util.clearTimeout(this, this._waittTimer);
       }
-      this._waittTimer = setTimeout(this, function() {
+      this._waittTimer = util.setTimeout(this, function() {
         _this3.suspendWaitingStatus("timeout");
-        clearTimeout(_this3, _this3._waittTimer);
+        util.clearTimeout(_this3, _this3._waittTimer);
         _this3._waittTimer = null;
       }, this.config.waitTimeout);
     }
@@ -254,11 +254,11 @@ var XGLogger = /* @__PURE__ */ function(_BasePlugin) {
     key: "suspendWaitingStatus",
     value: function suspendWaitingStatus(endType) {
       if (this._waitTimer) {
-        clearTimeout(this, this._waitTimer);
+        util.clearTimeout(this, this._waitTimer);
         this._waitTimer = null;
       }
       if (this._waittTimer) {
-        clearTimeout(this, this._waittTimer);
+        util.clearTimeout(this, this._waittTimer);
         this._waittTimer = null;
       }
       this._isWaiting = false;
@@ -285,7 +285,7 @@ var XGLogger = /* @__PURE__ */ function(_BasePlugin) {
       var player = this.player;
       this.emit(XGLOG, _objectSpread2({
         t: now(),
-        host: getHostFromUrl(player.currentSrc),
+        host: util.getHostFromUrl(player.currentSrc),
         vtype: player.vtype,
         eventType,
         currentTime: this.player.currentTime,

package/es/plugins/miniScreen/index.js

@@ -1,5 +1,5 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import { getCss, addClass, removeClass, checkTouchSupport } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import { PAUSE, PLAY, MINI_STATE_CHANGE } from "../../events.js";
 import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
@@ -28,7 +28,7 @@ var MiniScreen = /* @__PURE__ */ function(_Plugin) {
       if (!window.scrollY && window.scrollY !== 0 || Math.abs(window.scrollY - _this.pos.scrollY) < 50) {
         return;
       }
-      var scrollHeight = parseInt(getCss(_this.player.root, "height"));
+      var scrollHeight = parseInt(util.getCss(_this.player.root, "height"));
       scrollHeight += _this.config.scrollTop;
       _this.pos.scrollY = window.scrollY;
       if (window.scrollY > scrollHeight + 5) {
@@ -88,7 +88,7 @@ var MiniScreen = /* @__PURE__ */ function(_Plugin) {
         };
         player.controls.registerPlugin(MiniScreenIcon, options, MiniScreenIcon.pluginName);
       }
-      var eventName = checkTouchSupport() ? "touchend" : "click";
+      var eventName = util.checkTouchSupport() ? "touchend" : "click";
       this.bind(".mini-cancel-btn", eventName, this.onCancelClick);
       this.bind(".play-icon", eventName, this.onCenterClick);
       if (!this.config.disableDrag) {
@@ -131,7 +131,7 @@ var MiniScreen = /* @__PURE__ */ function(_Plugin) {
       var player = this.player, playerConfig = this.playerConfig;
       var target = this.config.target || this.player.root;
       this.lastStyle = {};
-      addClass(player.root, "xgplayer-mini");
+      util.addClass(player.root, "xgplayer-mini");
       ["width", "height", "top", "left"].map(function(key) {
         _this4.lastStyle[key] = target.style[key];
         target.style[key] = "".concat(_this4.pos[key], "px");
@@ -151,7 +151,7 @@ var MiniScreen = /* @__PURE__ */ function(_Plugin) {
       }
       var player = this.player, playerConfig = this.playerConfig;
       var target = this.config.target || this.player.root;
-      removeClass(player.root, "xgplayer-mini");
+      util.removeClass(player.root, "xgplayer-mini");
       if (this.lastStyle) {
         Object.keys(this.lastStyle).map(function(key) {
           target.style[key] = _this5.lastStyle[key];
@@ -170,7 +170,7 @@ var MiniScreen = /* @__PURE__ */ function(_Plugin) {
     key: "destroy",
     value: function destroy() {
       window.removeEventListener("scroll", this.onScroll);
-      var eventName = checkTouchSupport() ? "touchend" : "click";
+      var eventName = util.checkTouchSupport() ? "touchend" : "click";
       this.unbind(".mini-cancel-btn", eventName, this.onCancelClick);
       this.unbind(".play-icon", eventName, this.onCenterClick);
       this._draggabilly && this._draggabilly.destroy();

package/es/plugins/miniScreen/miniScreenIcon.js

@@ -1,4 +1,5 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
 import "../../utils/debug.js";
 import Plugin, { POSITIONS } from "../../plugin/plugin.js";
 var MiniScreenIcon = /* @__PURE__ */ function(_Plugin) {

package/es/plugins/mobile/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 { checkIsFunction, format, isUndefined, createDom, addClass, createEvent, removeClass } from "../../utils/util.js";
 import { DURATION_CHANGE, CANPLAY, ENDED } from "../../events.js";
 import "../../utils/debug.js";
 import { runHooks } from "../../plugin/hooksDescriptor.js";
@@ -27,8 +27,8 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
       var touche = _this.getTouche(e);
       if (touche && !config.disableGesture && _this.duration > 0 && !player.ended) {
         pos.isStart = true;
-        checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
-        _this.find(".xg-dur").innerHTML = format(_this.duration);
+        util.checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
+        _this.find(".xg-dur").innerHTML = util.format(_this.duration);
         var rect = _this.root.getBoundingClientRect();
         if (player.rotateDeg === 90) {
           pos.top = rect.left;
@@ -104,7 +104,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
       }
       pos.scope = -1;
       _this.resetPos();
-      checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
+      util.checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
       _this.changeAction(ACTIONS.AUTO);
     });
     _defineProperty(_assertThisInitialized(_this), "onRootTouchMove", function(e) {
@@ -177,11 +177,11 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
         config.closedbClick = true;
       }
       this.resetPos();
-      if (!isUndefined(playerConfig.disableGesture)) {
+      if (!util.isUndefined(playerConfig.disableGesture)) {
         config.disableGesture = !!playerConfig.disableGesture;
       }
       this.appendChild(".xg-seek-icon", this.icons.seekTipIcon);
-      this.xgMask = createDom("xg-mask", "", {}, "xgmask");
+      this.xgMask = util.createDom("xg-mask", "", {}, "xgmask");
       player.root.appendChild(this.xgMask);
       this.initCustomStyle();
       this.registerThumbnail();
@@ -257,7 +257,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
         this.find(".xg-bar").style.backgroundColor = progressColor;
         this.find(".time-preview").style.color = progressColor;
       }
-      this.config.disableTimeProgress && addClass(this.find(".xg-timebar"), "hide");
+      this.config.disableTimeProgress && util.addClass(this.find(".xg-timebar"), "hide");
     }
   }, {
     key: "resetPos",
@@ -384,7 +384,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
       var player = this.player, config = this.config, playerConfig = this.playerConfig;
       if (player.state < STATES.RUNNING) {
         if (!playerConfig.closeVideoClick) {
-          this.sendUseAction(createEvent("click"));
+          this.sendUseAction(util.createEvent("click"));
           player.play();
         }
         return;
@@ -393,7 +393,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
         player.isActive ? player.blur() : player.focus();
       } else if (!playerConfig.closeVideoClick) {
         if (player.isActive || config.focusVideoClick) {
-          this.sendUseAction(createEvent("click"));
+          this.sendUseAction(util.createEvent("click"));
           this.switchPlayPause();
         }
         player.focus();
@@ -404,7 +404,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
     value: function dbClickHandler(e) {
       var config = this.config, player = this.player;
       if (!config.closedbClick && player.state >= STATES.RUNNING) {
-        this.sendUseAction(createEvent("dblclick"));
+        this.sendUseAction(util.createEvent("dblclick"));
         this.switchPlayPause();
       }
     }
@@ -529,13 +529,13 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
       this.changeAction(ACTIONS.SEEKING);
       var startPlugin = player.plugins.start;
       startPlugin && startPlugin.focusHide();
-      this.find(".xg-dur").innerHTML = format(this.duration);
-      this.find(".xg-cur").innerHTML = format(time);
+      this.find(".xg-dur").innerHTML = util.format(this.duration);
+      this.find(".xg-cur").innerHTML = util.format(time);
       this.find(".xg-curbar").style.width = "".concat(time / this.duration * 100, "%");
       if (isForward) {
-        removeClass(this.find(".xg-seek-show"), "xg-back");
+        util.removeClass(this.find(".xg-seek-show"), "xg-back");
       } else {
-        addClass(this.find(".xg-seek-show"), "xg-back");
+        util.addClass(this.find(".xg-seek-show"), "xg-back");
       }
       this.updateThumbnails(time);
     }

package/es/plugins/pc/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 "../../utils/util.js";
 import sniffer from "../../utils/sniffer.js";
-import "../../utils/debug.js";
 import BasePlugin from "../../plugin/basePlugin.js";
 import "delegate";
 import { runHooks } from "../../plugin/hooksDescriptor.js";
@@ -132,14 +132,14 @@ var PCPlugin = /* @__PURE__ */ function(_BasePlugin) {
     key: "initEvents",
     value: function initEvents() {
       var _this3 = this;
-      var _this$player = this.player, video = _this$player.video, root = _this$player.root;
+      var _this$player = this.player, media = _this$player.media, root = _this$player.root;
       var enableContextmenu = this.playerConfig.enableContextmenu;
       root && root.addEventListener("click", this.onVideoClick, false);
       root && root.addEventListener("dblclick", this.onVideoDblClick, false);
       Object.keys(MOUSE_EVENTS).map(function(item) {
         root.addEventListener(item, _this3[MOUSE_EVENTS[item]], false);
       });
-      enableContextmenu && video && video.addEventListener("contextmenu", this.onContextmenu, false);
+      !enableContextmenu && media && media.addEventListener("contextmenu", this.onContextmenu, false);
     }
   }, {
     key: "switchPlayPause",

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

@@ -4,6 +4,11 @@ declare class PIP extends IconPlugin {
         position: string;
         index: number;
         showIcon: boolean;
+        preferDocument: boolean;
+        width: any;
+        height: any;
+        docPiPNode: any;
+        docPiPStyle: any;
     };
     static checkWebkitSetPresentationMode(video: any): boolean;
     beforeCreate(args: any): void;
@@ -21,17 +26,22 @@ declare class PIP extends IconPlugin {
     initIcons(): void;
     initPipEvents(): void;
     leavePIPCallback: () => void;
-    enterPIPCallback: (e: any) => void;
     pipWindow: any;
+    enterPIPCallback: (e: any) => void;
     onWebkitpresentationmodechanged: (e: any) => void;
     switchPIP: (e: any) => boolean;
+    copyStyleIntoPiPWindow(pipWin: any): void;
     requestPIP(): boolean;
     /**
      * 退出画中画
      */
     exitPIP(): boolean;
+    /**
+     * 处于画中画状态
+     */
     get isPip(): boolean;
     isPIPAvailable(): boolean;
+    isDocPIPAvailable(): boolean;
     render(): string;
 }
 import IconPlugin from "../common/iconPlugin";