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

package/es/plugins/pip/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, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import { removeClass, setTimeout, typeOf } from "../../utils/util.js";
+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, toConsumableArray as _toConsumableArray } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
 import { COMPLETE, PIP_CHANGE } from "../../events.js";
 import "../../utils/debug.js";
 import { POSITIONS } from "../../plugin/plugin.js";
@@ -69,7 +69,7 @@ var PIP = /* @__PURE__ */ function(_IconPlugin) {
       }
       this.once(COMPLETE, function() {
         if (_this2.config.showIcon) {
-          removeClass(_this2.find(".xgplayer-icon"), "xg-icon-disable");
+          util.removeClass(_this2.find(".xgplayer-icon"), "xg-icon-disable");
           _this2.bind("click", _this2.switchPIP);
         }
       });
@@ -102,16 +102,19 @@ var PIP = /* @__PURE__ */ function(_IconPlugin) {
       var player = this.player;
       this.leavePIPCallback = function() {
         var paused = player.paused;
-        setTimeout(_this3, function() {
+        util.setTimeout(_this3, function() {
           !paused && player.mediaPlay();
         }, 0);
         !paused && player.mediaPlay();
         _this3.setAttr("data-state", "normal");
+        _this3.pipWindow = null;
         player.emit(PIP_CHANGE, false);
       };
       this.enterPIPCallback = function(e) {
         player.emit(PIP_CHANGE, true);
-        _this3.pipWindow = e.pictureInPictureWindow;
+        if (e !== null && e !== void 0 && e.pictureInPictureWindow) {
+          _this3.pipWindow = e.pictureInPictureWindow;
+        }
         _this3.setAttr("data-state", "pip");
       };
       this.onWebkitpresentationmodechanged = function(e) {
@@ -132,19 +135,97 @@ var PIP = /* @__PURE__ */ function(_IconPlugin) {
         PIP2.checkWebkitSetPresentationMode(player.media) && player.media.addEventListener("webkitpresentationmodechanged", this.onWebkitpresentationmodechanged);
       }
     }
+  }, {
+    key: "copyStyleIntoPiPWindow",
+    value: function copyStyleIntoPiPWindow(pipWin) {
+      var textContent = _toConsumableArray(document.styleSheets).map(function(style2) {
+        try {
+          return _toConsumableArray(style2.cssRules).map(function(rule) {
+            return rule.cssText;
+          }).join("");
+        } catch (e) {
+          var link = document.createElement("link");
+          link.rel = "stylesheet";
+          link.type = style2.type;
+          link.media = style2.media;
+          link.href = style2.href;
+          pipWin.document.head.appendChild(link);
+        }
+        return "";
+      }).filter(Boolean).join("\n");
+      var style = document.createElement("style");
+      style.textContent = textContent;
+      pipWin.document.head.appendChild(style);
+    }
   }, {
     key: "requestPIP",
     value: function requestPIP() {
-      var player = this.player, playerConfig = this.playerConfig;
+      var _this4 = this;
+      var player = this.player, playerConfig = this.playerConfig, config = this.config;
       if (!this.isPIPAvailable() || this.isPip) {
         return;
       }
       try {
         var poster = playerConfig.poster;
         if (poster) {
-          player.media.poster = typeOf(poster) === "String" ? poster : poster.poster;
+          player.media.poster = util.typeOf(poster) === "String" ? poster : poster.poster;
+        }
+        if (config.preferDocument && this.isDocPIPAvailable()) {
+          var pipOptions = {};
+          if (config.width && config.height) {
+            pipOptions.width = config.width;
+            pipOptions.height = config.height;
+          } else {
+            var playerRect = player.root.getBoundingClientRect();
+            pipOptions.width = playerRect.width;
+            pipOptions.height = playerRect.height;
+          }
+          documentPictureInPicture.requestWindow(pipOptions).then(function(pipWin) {
+            var docPiPNode = config.docPiPNode, docPiPStyle = config.docPiPStyle;
+            _this4.enterPIPCallback();
+            var pipRoot = docPiPNode || player.root;
+            var parentNode = pipRoot.parentElement;
+            var previousSibling = pipRoot.previousSibling;
+            var nextSibling = pipRoot.nextSibling;
+            _this4.copyStyleIntoPiPWindow(pipWin);
+            var styles = document.createElement("style");
+            styles.append("body{padding:0; margin:0;}");
+            if (docPiPStyle) {
+              var cssContent = "";
+              if (typeof docPiPStyle === "string") {
+                cssContent = docPiPStyle;
+              } else if (typeof docPiPStyle === "function") {
+                cssContent = docPiPStyle.call(config);
+              }
+              if (cssContent) {
+                styles.append(cssContent);
+              }
+            } else if (pipRoot === player.root) {
+              styles.append("\n              .xgplayer{width: 100%!important; height: 100%!important;}\n            ");
+            }
+            pipWin.document.head.append(styles);
+            pipWin.document.body.append(pipRoot);
+            pipWin.addEventListener("pagehide", function(event) {
+              if (parentNode) {
+                if (nextSibling) {
+                  parentNode.insertBefore(pipRoot, nextSibling);
+                } else if (previousSibling) {
+                  parentNode.insertBefore(pipRoot, previousSibling.nextSibling);
+                } else {
+                  parentNode.appendChild(pipRoot);
+                }
+              } else {
+              }
+              _this4.leavePIPCallback();
+            }, {
+              once: true
+            });
+          });
+        } else if (PIP2.checkWebkitSetPresentationMode(player.media)) {
+          player.media.webkitSetPresentationMode("picture-in-picture");
+        } else {
+          player.media.requestPictureInPicture();
         }
-        PIP2.checkWebkitSetPresentationMode(player.media) ? player.media.webkitSetPresentationMode("picture-in-picture") : player.media.requestPictureInPicture();
         return true;
       } catch (reason) {
         console.error("requestPiP", reason);
@@ -157,7 +238,14 @@ var PIP = /* @__PURE__ */ function(_IconPlugin) {
       var player = this.player;
       try {
         if (this.isPIPAvailable() && this.isPip) {
-          PIP2.checkWebkitSetPresentationMode(player.media) ? player.media.webkitSetPresentationMode("inline") : document.exitPictureInPicture();
+          var _documentPictureInPic;
+          if (this.isDocPIPAvailable() && (_documentPictureInPic = documentPictureInPicture) !== null && _documentPictureInPic !== void 0 && _documentPictureInPic.window) {
+            documentPictureInPicture.window.close();
+          } else if (PIP2.checkWebkitSetPresentationMode(player.media)) {
+            player.media.webkitSetPresentationMode("inline");
+          } else {
+            document.exitPictureInPicture();
+          }
         }
         return true;
       } catch (reason) {
@@ -168,15 +256,21 @@ var PIP = /* @__PURE__ */ function(_IconPlugin) {
   }, {
     key: "isPip",
     get: function get() {
+      var _documentPictureInPic2;
       var player = this.player;
-      return document.pictureInPictureElement && document.pictureInPictureElement === player.media || player.media.webkitPresentationMode === PresentationMode.PIP;
+      return !!(this.isDocPIPAvailable() && (_documentPictureInPic2 = documentPictureInPicture) !== null && _documentPictureInPic2 !== void 0 && _documentPictureInPic2.window) || document.pictureInPictureElement && document.pictureInPictureElement === player.media || player.media.webkitPresentationMode === PresentationMode.PIP;
     }
   }, {
     key: "isPIPAvailable",
     value: function isPIPAvailable() {
       var video = this.player.media;
-      var _isEnabled = typeOf(document.pictureInPictureEnabled) === "Boolean" ? document.pictureInPictureEnabled : true;
-      return _isEnabled && (typeOf(video.disablePictureInPicture) === "Boolean" && !video.disablePictureInPicture || video.webkitSupportsPresentationMode && typeOf(video.webkitSetPresentationMode) === "Function");
+      var _isEnabled = util.typeOf(document.pictureInPictureEnabled) === "Boolean" ? document.pictureInPictureEnabled : true;
+      return _isEnabled && (util.typeOf(video.disablePictureInPicture) === "Boolean" && !video.disablePictureInPicture || video.webkitSupportsPresentationMode && util.typeOf(video.webkitSetPresentationMode) === "Function") || this.isDocPIPAvailable();
+    }
+  }, {
+    key: "isDocPIPAvailable",
+    value: function isDocPIPAvailable() {
+      return "documentPictureInPicture" in window && /^(https|file)/.test(location.protocol);
     }
   }, {
     key: "destroy",
@@ -208,7 +302,12 @@ var PIP = /* @__PURE__ */ function(_IconPlugin) {
       return {
         position: POSITIONS.CONTROLS_RIGHT,
         index: 6,
-        showIcon: false
+        showIcon: false,
+        preferDocument: false,
+        width: void 0,
+        height: void 0,
+        docPiPNode: void 0,
+        docPiPStyle: void 0
       };
     }
   }, {

package/es/plugins/play/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 { PAUSE, ERROR, EMPTIED, PLAY } 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/playNext/index.js

@@ -1,7 +1,8 @@
 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 { PLAYNEXT } from "../../events.js";
+import "../../utils/debug.js";
 import Plugin, { POSITIONS } from "../../plugin/plugin.js";
 import { xgIconTips } from "../common/iconTools.js";
 import Next from "../assets/playNext.js";

package/es/plugins/playbackRate/index.js

@@ -1,6 +1,7 @@
 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 "../../utils/debug.js";
+import "../../utils/util.js";
 import { RATE_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
 import { POSITIONS } from "../../plugin/plugin.js";
 import OptionsIcon from "../common/optionsIcon.js";
 var PlaybackRate = /* @__PURE__ */ function(_OptionsIcon) {

package/es/plugins/poster/index.css

@@ -22,6 +22,10 @@
   opacity: 0;
   visibility: hidden;
 }
+.xgplayer.xgplayer-playing .xg-not-hidden {
+  opacity: 1;
+  visibility: visible;
+}
 
 .xgplayer.xgplayer-is-enter .xgplayer-poster.xg-showplay, .xgplayer.xgplayer-playing .xgplayer-poster.xg-showplay {
   opacity: 1;

package/es/plugins/poster/index.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 { ENDED, TIME_UPDATE, URL_CHANGE, PLAY } from "../../events.js";
 import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
@@ -21,12 +21,12 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
   }, {
     key: "hide",
     value: function hide() {
-      addClass(this.root, "hide");
+      util.addClass(this.root, "hide");
     }
   }, {
     key: "show",
     value: function show() {
-      removeClass(this.root, "hide");
+      util.removeClass(this.root, "hide");
     }
   }, {
     key: "beforeCreate",
@@ -41,7 +41,7 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
       var _this = this;
       this.on(ENDED, function() {
         if (_this.isEndedShow) {
-          removeClass(_this.root, "hide");
+          util.removeClass(_this.root, "hide");
         }
       });
       if (this.config.hideCanplay) {
@@ -49,15 +49,15 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
           _this.onTimeUpdate();
         });
         this.on(URL_CHANGE, function() {
-          removeClass(_this.root, "hide");
-          addClass(_this.root, "xg-showplay");
+          util.removeClass(_this.root, "hide");
+          util.addClass(_this.root, "xg-showplay");
           _this.once(TIME_UPDATE, function() {
             _this.onTimeUpdate();
           });
         });
       } else {
         this.on(PLAY, function() {
-          addClass(_this.root, "hide");
+          util.addClass(_this.root, "hide");
         });
       }
     }
@@ -70,7 +70,7 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
           _this2.onTimeUpdate();
         });
       } else {
-        removeClass(this.root, "xg-showplay");
+        util.removeClass(this.root, "xg-showplay");
       }
     }
   }, {
@@ -104,10 +104,11 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
   }, {
     key: "render",
     value: function render() {
-      var _this$config = this.config, poster = _this$config.poster, hideCanplay = _this$config.hideCanplay, fillMode = _this$config.fillMode;
+      var _this$config = this.config, poster = _this$config.poster, hideCanplay = _this$config.hideCanplay, fillMode = _this$config.fillMode, notHidden = _this$config.notHidden;
       var _bg = this.getBgSize(fillMode);
       var style = poster ? "background-image:url(".concat(poster, ");").concat(_bg) : _bg;
-      return '<xg-poster class="xgplayer-poster '.concat(hideCanplay ? "xg-showplay" : "", '" style="').concat(style, '">\n    </xg-poster>');
+      var className = notHidden ? "xg-not-hidden" : hideCanplay ? "xg-showplay" : "";
+      return '<xg-poster class="xgplayer-poster '.concat(className, '" style="').concat(style, '">\n    </xg-poster>');
     }
   }], [{
     key: "pluginName",
@@ -120,6 +121,7 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
       return {
         isEndedShow: true,
         hideCanplay: false,
+        notHidden: false,
         poster: "",
         fillMode: "fixWidth"
       };

package/es/plugins/poster/index.scss

@@ -26,6 +26,10 @@
     opacity: 0;
     visibility: hidden;
   }
+  .xg-not-hidden {
+    opacity: 1;
+    visibility: visible;
+  }
 }
 
 .xgplayer {

package/es/plugins/progress/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, objectSpread2 as _objectSpread2, typeof as _typeof } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
 import sniffer from "../../utils/sniffer.js";
-import { event, getEventPos, checkIsFunction, addClass, removeClass, setTimeout, checkTouchSupport, stopPropagation, getCurrentTimeByOffset, adjustTimeByDuration } from "../../utils/util.js";
 import { DURATION_CHANGE, TIME_UPDATE, SEEKED, PROGRESS, ENDED, EMPTIED, VIDEO_RESIZE } from "../../events.js";
 import "../../utils/debug.js";
 import Plugin, { POSITIONS } from "../../plugin/plugin.js";
@@ -20,8 +20,8 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       var _assertThisInitialize = _assertThisInitialized(_this), pos = _assertThisInitialize.pos, config = _assertThisInitialize.config, player = _assertThisInitialize.player;
       var ret = data;
       if (e) {
-        event(e);
-        var _ePos = getEventPos(e, player.zoom);
+        util.event(e);
+        var _ePos = util.getEventPos(e, player.zoom);
         var x = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
         if (pos.moving && Math.abs(pos.x - x) < config.miniMoveStep) {
           return;
@@ -41,7 +41,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       e.preventDefault();
       e.stopPropagation();
     });
-    _defineProperty(_assertThisInitialized(_this), "_mouseDownHandler", function(event2, data) {
+    _defineProperty(_assertThisInitialized(_this), "_mouseDownHandler", function(event, data) {
       _this._state.time = data.currentTime;
       _this.updateWidth(data.currentTime, data.seekTime, data.percent, 0);
       _this._updateInnerFocus(data);
@@ -70,7 +70,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     });
     _defineProperty(_assertThisInitialized(_this), "onMouseDown", function(e) {
       var _assertThisInitialize4 = _assertThisInitialized(_this), _state = _assertThisInitialize4._state, player = _assertThisInitialize4.player, pos = _assertThisInitialize4.pos, config = _assertThisInitialize4.config, playerConfig = _assertThisInitialize4.playerConfig;
-      var _ePos = getEventPos(e, player.zoom);
+      var _ePos = util.getEventPos(e, player.zoom);
       var x = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
       if (player.isMini || config.closeMoveSeek || !playerConfig.allowSeekAfterEnded && player.ended) {
         return;
@@ -81,9 +81,9 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       }
       e.stopPropagation();
       _this.focus();
-      checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
-      checkIsFunction(config.onMoveStart) && config.onMoveStart();
-      event(e);
+      util.checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
+      util.checkIsFunction(config.onMoveStart) && config.onMoveStart();
+      util.event(e);
       pos.x = x;
       pos.isDown = true;
       pos.moving = false;
@@ -92,7 +92,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         autoHide: false
       });
       _this.isProgressMoving = true;
-      addClass(_this.progressBtn, "active");
+      util.addClass(_this.progressBtn, "active");
       var ret = _this.computeTime(e, x);
       ret.prePlayTime = _state.prePlayTime;
       _this._mouseDownHandlerHook(e, ret);
@@ -111,10 +111,10 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       var _assertThisInitialize5 = _assertThisInitialized(_this), player = _assertThisInitialize5.player, config = _assertThisInitialize5.config, pos = _assertThisInitialize5.pos, playerConfig = _assertThisInitialize5.playerConfig, _state = _assertThisInitialize5._state;
       e.stopPropagation();
       e.preventDefault();
-      checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
-      checkIsFunction(config.onMoveEnd) && config.onMoveEnd();
-      event(e);
-      removeClass(_this.progressBtn, "active");
+      util.checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
+      util.checkIsFunction(config.onMoveEnd) && config.onMoveEnd();
+      util.event(e);
+      util.removeClass(_this.progressBtn, "active");
       var ret = _this.computeTime(e, pos.x);
       ret.prePlayTime = _state.prePlayTime;
       if (pos.moving) {
@@ -146,18 +146,18 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
           playerConfig.isMobileSimulateMode !== "mobile" && _this.bind("mousemove", _this.onMoveOnly);
         }
       }
-      setTimeout(_assertThisInitialized(_this), function() {
+      util.setTimeout(_assertThisInitialized(_this), function() {
         _this.resetSeekState();
       }, 10);
       player.focus();
     });
     _defineProperty(_assertThisInitialized(_this), "onMouseMove", function(e) {
       var _assertThisInitialize6 = _assertThisInitialized(_this), _state = _assertThisInitialize6._state, pos = _assertThisInitialize6.pos, player = _assertThisInitialize6.player, config = _assertThisInitialize6.config;
-      if (checkTouchSupport()) {
+      if (util.checkTouchSupport()) {
         e.preventDefault();
       }
-      event(e);
-      var _ePos = getEventPos(e, player.zoom);
+      util.event(e);
+      var _ePos = util.getEventPos(e, player.zoom);
       var x = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
       var diff = Math.abs(pos.x - x);
       if (pos.moving && diff < config.miniMoveStep || !pos.moving && diff < config.miniStartStep) {
@@ -182,8 +182,8 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       pos.isEnter = true;
       _this.bind("mousemove", _this.onMoveOnly);
       _this.bind("mouseleave", _this.onMouseLeave);
-      event(e);
-      var _ePos = getEventPos(e, player.zoom);
+      util.event(e);
+      var _ePos = util.getEventPos(e, player.zoom);
       var x = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
       var ret = _this.computeTime(e, x);
       _this.triggerCallbacks("mouseenter", ret, e);
@@ -366,12 +366,12 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     }
   }, {
     key: "triggerCallbacks",
-    value: function triggerCallbacks(type, data, event2) {
+    value: function triggerCallbacks(type, data, event) {
       if (this.__dragCallBacks.length > 0) {
         this.__dragCallBacks.map(function(item) {
           if (item && item.handler && item.type === type) {
             try {
-              item.handler(data, event2);
+              item.handler(data, event);
             } catch (error) {
               console.error("[XGPLAYER][triggerCallbacks] ".concat(item, " error"), error);
             }
@@ -391,11 +391,11 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     }
   }, {
     key: "removeCallBack",
-    value: function removeCallBack(type, event2) {
+    value: function removeCallBack(type, event) {
       var __dragCallBacks = this.__dragCallBacks;
       var _index = -1;
       __dragCallBacks.map(function(item, index) {
-        if (item && item.type === type && item.handler === event2) {
+        if (item && item.type === type && item.handler === event) {
           _index = index;
         }
       });
@@ -428,8 +428,8 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       if (this.domEventType === "touch" || this.domEventType === "compatible") {
         this.root.addEventListener("touchstart", this.onMouseDown);
         if (controls) {
-          controls.root && controls.root.addEventListener("touchmove", stopPropagation);
-          controls.center && controls.center.addEventListener("touchend", stopPropagation);
+          controls.root && controls.root.addEventListener("touchmove", util.stopPropagation);
+          controls.center && controls.center.addEventListener("touchend", util.stopPropagation);
         }
       }
       if (this.domEventType === "mouse" || this.domEventType === "compatible") {
@@ -444,7 +444,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     key: "focus",
     value: function focus() {
       this.player.controls.pauseAutoHide();
-      addClass(this.root, "active");
+      util.addClass(this.root, "active");
     }
   }, {
     key: "blur",
@@ -453,7 +453,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         return;
       }
       this.player.controls.recoverAutoHide();
-      removeClass(this.root, "active");
+      util.removeClass(this.root, "active");
     }
   }, {
     key: "disableBlur",
@@ -501,7 +501,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       var percent = offset / rWidth;
       percent = percent < 0 ? 0 : percent > 1 ? 1 : percent;
       var currentTime = parseInt(percent * this.offsetDuration * 1e3, 10) / 1e3;
-      var seekTime = getCurrentTimeByOffset(currentTime, player.timeSegments);
+      var seekTime = util.getCurrentTimeByOffset(currentTime, player.timeSegments);
       return {
         percent,
         currentTime,
@@ -554,7 +554,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     key: "onTimeupdate",
     value: function onTimeupdate(isEnded) {
       var player = this.player, _state = this._state, offsetDuration = this.offsetDuration;
-      if (player.isSeeking || this.isProgressMoving) {
+      if (player.isSeeking && player.media.seeking || this.isProgressMoving || !player.hasStart) {
         return;
       }
       if (_state.now > -1) {
@@ -567,7 +567,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         }
       }
       var time = this.currentTime;
-      time = adjustTimeByDuration(time, offsetDuration, isEnded);
+      time = util.adjustTimeByDuration(time, offsetDuration, isEnded);
       this.innerList.update({
         played: time
       }, offsetDuration);
@@ -585,7 +585,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         return;
       }
       var _end = player.bufferedPoint.end;
-      _end = adjustTimeByDuration(_end, duration, isEnded);
+      _end = util.adjustTimeByDuration(_end, duration, isEnded);
       this.innerList.update({
         cached: _end
       }, duration);
@@ -601,11 +601,13 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         played: 0,
         cached: 0
       }, 0);
+      this.progressBtn.style.left = "0%";
       var miniprogress = this.player.plugins.miniprogress;
       miniprogress && miniprogress.update({
         cached: 0,
         played: 0
       }, 0);
+      this.progressBtn.style.left = "0%";
     }
   }, {
     key: "destroy",
@@ -621,8 +623,8 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         this.root.removeEventListener("touchmove", this.onMouseMove);
         this.root.removeEventListener("touchend", this.onMouseUp);
         if (controls) {
-          controls.root && controls.root.removeEventListener("touchmove", stopPropagation);
-          controls.center && controls.center.removeEventListener("touchend", stopPropagation);
+          controls.root && controls.root.removeEventListener("touchmove", util.stopPropagation);
+          controls.center && controls.center.removeEventListener("touchend", util.stopPropagation);
         }
       }
       if (domEventType === "mouse" || domEventType === "compatible") {

package/es/plugins/progress/innerList.js

@@ -1,5 +1,7 @@
 import { createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import { typeOf, hasClass, removeClass, addClass, createDom } from "../../utils/util.js";
+import util from "../../utils/util.js";
+import "../../utils/debug.js";
+import "delegate";
 var TPL = [{
   tag: "xg-cache",
   className: "xgplayer-progress-cache",
@@ -123,7 +125,7 @@ var InnerList = /* @__PURE__ */ function() {
         this.updateDuration(parseInt(duration * 1e3, 10));
       }
       var playedIndex = this.playedIndex, cachedIndex = this.cachedIndex;
-      if (typeOf(data.played) !== "Undefined") {
+      if (util.typeOf(data.played) !== "Undefined") {
         var newPIndex = this.findIndex(data.played * 1e3, playedIndex);
         if (newPIndex < 0) {
           return;
@@ -135,7 +137,7 @@ var InnerList = /* @__PURE__ */ function() {
         });
         this.playedIndex = newPIndex;
       }
-      if (typeOf(data.cached) !== "Undefined") {
+      if (util.typeOf(data.cached) !== "Undefined") {
         var newCIndex = this.findIndex(data.cached * 1e3, cachedIndex);
         if (newCIndex < 0) {
           return;
@@ -177,7 +179,7 @@ var InnerList = /* @__PURE__ */ function() {
     value: function findHightLight() {
       var children = this.root.children;
       for (var i = 0; i < children.length; i++) {
-        if (hasClass(children[i], this.fragConfig.fragFocusClass)) {
+        if (util.hasClass(children[i], this.fragConfig.fragFocusClass)) {
           return {
             dom: children[i],
             pos: children[i].getBoundingClientRect()
@@ -202,7 +204,7 @@ var InnerList = /* @__PURE__ */ function() {
     value: function unHightLight() {
       var children = this.root.children;
       for (var i = 0; i < children.length; i++) {
-        removeClass(children[i], this.fragConfig.fragFocusClass);
+        util.removeClass(children[i], this.fragConfig.fragFocusClass);
       }
     }
   }, {
@@ -210,7 +212,7 @@ var InnerList = /* @__PURE__ */ function() {
     value: function setHightLight(index) {
       var children = this.root.children;
       if (index < children.length) {
-        addClass(children[index], this.fragConfig.fragFocusClass);
+        util.addClass(children[index], this.fragConfig.fragFocusClass);
         return {
           dom: children[index],
           pos: children[index].getBoundingClientRect()
@@ -255,17 +257,17 @@ var InnerList = /* @__PURE__ */ function() {
       var _this3 = this;
       var progressColor = this.style.progressColor;
       if (!this.root) {
-        this.root = createDom("xg-inners", "", {}, "progress-list");
+        this.root = util.createDom("xg-inners", "", {}, "progress-list");
       }
       if (this.fragments) {
         var _this$fragConfig = this.fragConfig, fragClass = _this$fragConfig.fragClass, fragFocusClass = _this$fragConfig.fragFocusClass;
         this.progressList = this.fragments.map(function(item) {
-          var inner = createDom("xg-inner", "", {
+          var inner = util.createDom("xg-inner", "", {
             style: progressColor ? "background:".concat(progressColor, "; flex: ").concat(item.percent) : "flex: ".concat(item.percent)
           }, "".concat(item.isFocus ? fragFocusClass : "", " xgplayer-progress-inner ").concat(fragClass));
           _this3.root.appendChild(inner);
           TPL.forEach(function(item2) {
-            inner.appendChild(createDom(item2.tag, "", {
+            inner.appendChild(util.createDom(item2.tag, "", {
               style: item2.styleKey ? "background: ".concat(_this3.style[item2.styleKey], "; width:0;") : "width:0;"
             }, item2.className));
           });

package/es/plugins/progress/miniProgress.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 from "../../plugin/plugin.js";
 function getBgColor(color) {