@volcengine/veplayer-plugin 2.8.0-rc.2 → 2.8.1-rc.0

package/esm/veplayer.plugin.ad.development.js

@@ -1807,6 +1807,8 @@ var sniffer = {
     var ua = navigator.userAgent;
     var isWindowsPhone = /(?:Windows Phone)/.test(ua);
     var isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone;
+    var isTizen = /(?:Tizen)/ig.test(ua);
+    var isWebOS = /(?:Web0S)/ig.test(ua);
     var isAndroid = /(?:Android)/.test(ua);
     var isFireFox = /(?:Firefox)/.test(ua);
     var isIpad = /(?:iPad|PlayBook)/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
@@ -1822,7 +1824,9 @@ var sniffer = {
       isPc,
       isSymbian,
       isWindowsPhone,
-      isFireFox
+      isFireFox,
+      isTizen,
+      isWebOS
     };
   },
   get osVersion() {
@@ -2548,6 +2552,7 @@ var Plugin = /* @__PURE__ */ function(_BasePlugin) {
       this.icons = {};
       this.root = null;
       this.parent = null;
+      this.extraEls = [];
       var _orgicons = this.registerIcons() || {};
       registerIconsObj(_orgicons, this);
       this.langText = {};
@@ -2890,6 +2895,7 @@ var Plugin = /* @__PURE__ */ function(_BasePlugin) {
       ["root", "parent"].map(function(item) {
         _this7[item] = null;
       });
+      this.extraEls = [];
     }
   }], [{
     key: "insert",
@@ -3006,12 +3012,6 @@ var STATES = {
   ENDED: 7,
   DESTROYED: 8
 };
-function PlaySvg() {
-  return new DOMParser().parseFromString('<svg class="play" xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="3 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"></path>\n</svg>\n', "image/svg+xml").firstChild;
-}
-function PauseSvg() {
-  return new DOMParser().parseFromString('<svg class="pause" xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="3 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z"></path>\n</svg>\n', "image/svg+xml").firstChild;
-}
 function xgIconTips(plugin2, textKey, isShow) {
   try {
     return ' <div class="xg-tips '.concat(isShow ? "hide" : " ", '" lang-key="').concat(plugin2.i18nKeys[textKey], '">\n    ').concat(plugin2.i18n[textKey], "\n    </div>");
@@ -3019,1400 +3019,1547 @@ function xgIconTips(plugin2, textKey, isShow) {
     return '<div class="xg-tips hide"></div>';
   }
 }
-var TPL = [{
-  tag: "xg-cache",
-  className: "xgplayer-progress-cache",
-  styleKey: "cachedColor"
-}, {
-  tag: "xg-played",
-  className: "xgplayer-progress-played",
-  styleKey: "playedColor"
-}];
-var InnerList = /* @__PURE__ */ function() {
-  function InnerList2(args) {
-    _classCallCheck$1(this, InnerList2);
-    this.fragments = args.fragments || [];
-    if (this.fragments.length === 0) {
-      this.fragments.push({
-        percent: 1
+var Icon = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Icon2, _Plugin);
+  var _super = _createSuper(Icon2);
+  function Icon2() {
+    var _this;
+    _classCallCheck$1(this, Icon2);
+    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$1(_assertThisInitialized(_this), "_onMouseenter", function(e4) {
+      _this.emit("icon_mouseenter", {
+        pluginName: _this.pluginName
+      });
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "_onMouseLeave", function(e4) {
+      _this.emit("icon_mouseleave", {
+        pluginName: _this.pluginName
       });
+    });
+    return _this;
+  }
+  _createClass$1(Icon2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      this.bind("mouseenter", this._onMouseenter);
+      this.bind("mouseleave", this._onMouseLeave);
+      if (this.config.disable) {
+        this.disable();
+      }
     }
-    this._callBack = args.actionCallback;
-    this.fragConfig = {
-      fragFocusClass: args.fragFocusClass || "inner-focus-point",
-      fragAutoFocus: !!args.fragAutoFocus,
-      fragClass: args.fragClass || ""
-    };
-    this.style = args.style || {
-      playedColor: "",
-      cachedColor: "",
-      progressColor: ""
-    };
-    this.duration = 0;
-    this.cachedIndex = 0;
-    this.playedIndex = 0;
-    this.focusIndex = -1;
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind("mouseenter", this._onMouseenter);
+      this.unbind("mouseleave", this._onMouseLeave);
+    }
+  }]);
+  return Icon2;
+}(Plugin);
+function CssFullSceenSvg() {
+  return new DOMParser().parseFromString(`<svg xmlns="http://www.w3.org/2000/svg" width="31" height="40" viewBox="0 -5 31 40">
+  <path fill="#fff" transform="scale(1.3, 1.3)" class='path_full' d="M9,10v1a.9.9,0,0,1-1,1,.9.9,0,0,1-1-1V9A.9.9,0,0,1,8,8h2a.9.9,0,0,1,1,1,.9.9,0,0,1-1,1Zm6,4V13a1,1,0,0,1,2,0v2a.9.9,0,0,1-1,1H14a1,1,0,0,1,0-2Zm3-7H6V17H18Zm2,0V17a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V7A2,2,0,0,1,6,5H18A2,2,0,0,1,20,7Z"></path>
+</svg>
+`, "image/svg+xml").firstChild;
+}
+function ExitCssFullSceenSvg() {
+  return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg" width="31" height="40" viewBox="0 -5 31 40">\n  <path fill="#fff" transform="scale(1.3, 1.3)" d="M9,10V9a.9.9,0,0,1,1-1,.9.9,0,0,1,1,1v2a.9.9,0,0,1-1,1H8a.9.9,0,0,1-1-1,.9.9,0,0,1,1-1Zm6,4v1a1,1,0,0,1-2,0V13a.9.9,0,0,1,1-1h2a1,1,0,0,1,0,2Zm3-7H6V17H18Zm2,0V17a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V7A2,2,0,0,1,6,5H18A2,2,0,0,1,20,7Z"></path>\n</svg>\n', "image/svg+xml").firstChild;
+}
+var CssFullScreen = /* @__PURE__ */ function(_IconPlugin) {
+  _inherits(CssFullScreen2, _IconPlugin);
+  var _super = _createSuper(CssFullScreen2);
+  function CssFullScreen2() {
+    _classCallCheck$1(this, CssFullScreen2);
+    return _super.apply(this, arguments);
   }
-  _createClass$1(InnerList2, [{
-    key: "updateDuration",
-    value: function updateDuration(duration) {
-      var _this = this;
-      this.duration = duration;
-      var start = 0;
-      var fragments = this.fragments;
-      this.fragments = fragments.map(function(item) {
-        item.start = parseInt(start, 10);
-        item.end = parseInt(start + item.percent * _this.duration, 10);
-        item.duration = parseInt(item.percent * _this.duration, 10);
-        start += item.percent * _this.duration;
-        return item;
-      });
+  _createClass$1(CssFullScreen2, [{
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      if (typeof args.player.config.cssFullscreen === "boolean") {
+        args.config.disable = !args.player.config.cssFullscreen;
+      }
     }
   }, {
-    key: "updateProgress",
-    value: function updateProgress() {
-      var type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "played";
-      var data = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-        newIndex: 0,
-        curIndex: 0,
-        millisecond: 0
-      };
-      var progressList = this.progressList, fragments = this.fragments;
-      if (progressList.length < 1) {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      _get(_getPrototypeOf(CssFullScreen2.prototype), "afterCreate", this).call(this);
+      if (this.config.disable) {
         return;
       }
-      var newIndex = data.newIndex, curIndex = data.curIndex, millisecond = data.millisecond;
-      if (newIndex !== curIndex) {
-        progressList.map(function(item, index2) {
-          if (index2 < newIndex) {
-            item[type].style.width = "100%";
-          } else if (index2 > newIndex) {
-            item[type].style.width = 0;
-          }
-        });
+      if (this.config.target) {
+        this.playerConfig.fullscreenTarget = this.config.target;
       }
-      var curPFrag = fragments[newIndex];
-      var per = millisecond === 0 ? 0 : (millisecond - curPFrag.start) / curPFrag.duration;
-      progressList[newIndex][type].style.width = per < 0 ? 0 : "".concat(per * 100, "%");
+      this.initIcons();
+      this.on(CSS_FULLSCREEN_CHANGE, function(isCssfullScreen) {
+        _this.animate(isCssfullScreen);
+      });
+      this.btnClick = this.btnClick.bind(this);
+      this.handleCssFullscreen = this.hook("cssFullscreen_change", this.btnClick, {
+        pre: function pre(e4) {
+          e4.preventDefault();
+          e4.stopPropagation();
+        }
+      });
+      this.bind(["click", "touchend"], this.handleCssFullscreen);
     }
   }, {
-    key: "updateFocus",
-    value: function updateFocus(data) {
-      if (!this.fragConfig.fragAutoFocus || this.fragments.length < 2) {
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      var contentIcon = this.find(".xgplayer-icon");
+      contentIcon.appendChild(icons.cssFullscreen);
+      contentIcon.appendChild(icons.exitCssFullscreen);
+    }
+  }, {
+    key: "btnClick",
+    value: function btnClick(e4) {
+      e4.preventDefault();
+      e4.stopPropagation();
+      var isCssfullScreen = this.player.isCssfullScreen;
+      this.emitUserAction(e4, "switch_cssfullscreen", {
+        cssfullscreen: isCssfullScreen
+      });
+      if (!isCssfullScreen) {
+        this.player.getCssFullscreen();
+      } else {
+        this.player.exitCssFullscreen();
+      }
+    }
+  }, {
+    key: "animate",
+    value: function animate(isFullScreen) {
+      if (!this.root) {
         return;
       }
-      if (!data) {
-        if (this.focusIndex > -1) {
-          this.unHightLight(this.focusIndex);
-          var _data = {
-            index: -1,
-            preIndex: this.focusIndex,
-            fragment: null
-          };
-          this._callBack && this._callBack(_data);
-          this.focusIndex = -1;
+      isFullScreen ? this.setAttr("data-state", "full") : this.setAttr("data-state", "normal");
+      this.switchTips(isFullScreen);
+    }
+  }, {
+    key: "switchTips",
+    value: function switchTips(isFullScreen) {
+      var i18nKeys = this.i18nKeys;
+      var tipDom = this.find(".xg-tips");
+      tipDom && this.changeLangTextKey(tipDom, isFullScreen ? i18nKeys.EXITCSSFULLSCREEN_TIPS : i18nKeys.CSSFULLSCREEN_TIPS);
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        cssFullscreen: {
+          icon: CssFullSceenSvg,
+          class: "xg-get-cssfull"
+        },
+        exitCssFullscreen: {
+          icon: ExitCssFullSceenSvg,
+          class: "xg-exit-cssfull"
         }
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      _get(_getPrototypeOf(CssFullScreen2.prototype), "destroy", this).call(this);
+      this.unbind(["click", "touchend"], this.btnClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
         return;
       }
-      var newPIndex = this.findIndex(data.currentTime * 1e3, this.focusIndex);
-      if (newPIndex >= 0 && newPIndex !== this.focusIndex) {
-        this.focusIndex > -1 && this.unHightLight(this.focusIndex);
-        this.setHightLight(newPIndex);
-        var _data2 = {
-          index: newPIndex,
-          preIndex: this.focusIndex,
-          fragment: this.fragments[this.focusIndex]
-        };
-        this.focusIndex = newPIndex;
-        this._callBack && this._callBack(_data2);
-      }
+      return `<xg-icon class='xgplayer-cssfullscreen'>
+    <div class="xgplayer-icon">
+    </div>
+    `.concat(xgIconTips(this, "CSSFULLSCREEN_TIPS", this.playerConfig.isHideTips), "\n    </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "cssFullscreen";
     }
   }, {
-    key: "update",
-    value: function update() {
-      var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
-        cached: 0,
-        played: 0
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 1,
+        disable: false,
+        target: null
       };
-      var duration = arguments.length > 1 ? arguments[1] : void 0;
-      if (!this.duration || parseInt(duration * 1e3, 10) !== this.duration) {
-        if (!duration && duration !== 0) {
-          return;
-        }
-        this.updateDuration(parseInt(duration * 1e3, 10));
-      }
-      var playedIndex = this.playedIndex, cachedIndex = this.cachedIndex;
-      if (util$3.typeOf(data.played) !== "Undefined") {
-        var newPIndex = this.findIndex(data.played * 1e3, playedIndex);
-        if (newPIndex < 0) {
-          return;
-        }
-        this.updateProgress("played", {
-          newIndex: newPIndex,
-          curIndex: playedIndex,
-          millisecond: parseInt(data.played * 1e3, 10)
-        });
-        this.playedIndex = newPIndex;
-      }
-      if (util$3.typeOf(data.cached) !== "Undefined") {
-        var newCIndex = this.findIndex(data.cached * 1e3, cachedIndex);
-        if (newCIndex < 0) {
-          return;
-        }
-        this.updateProgress("cached", {
-          newIndex: newCIndex,
-          curIndex: cachedIndex,
-          millisecond: parseInt(data.cached * 1e3, 10)
-        });
-        this.cachedIndex = newCIndex;
-      }
-    }
-  }, {
-    key: "findIndex",
-    value: function findIndex(time, curIndex) {
-      var fragments = this.fragments;
-      if (!fragments || fragments.length === 0) {
-        return -1;
-      }
-      if (fragments.length === 1) {
-        return 0;
-      }
-      if (curIndex > -1 && curIndex < fragments.length && time > fragments[curIndex].start && time < fragments[curIndex].end) {
-        return curIndex;
-      }
-      if (time > fragments[fragments.length - 1].start) {
-        return fragments.length - 1;
-      }
-      for (var i2 = 0; i2 < fragments.length; i2++) {
-        if (time > fragments[i2].start && time <= fragments[i2].end) {
-          curIndex = i2;
-          break;
-        }
-      }
-      return curIndex;
     }
-  }, {
-    key: "findHightLight",
-    value: function findHightLight() {
-      var children = this.root.children;
-      for (var i2 = 0; i2 < children.length; i2++) {
-        if (util$3.hasClass(children[i2], this.fragConfig.fragFocusClass)) {
-          return {
-            dom: children[i2],
-            pos: children[i2].getBoundingClientRect()
-          };
-        }
-      }
+  }]);
+  return CssFullScreen2;
+}(Icon);
+function BackSVG() {
+  return new DOMParser().parseFromString('<svg width="32px" height="40px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <path d="M11.2374369,14 L17.6187184,7.61871843 C17.9604272,7.27700968 17.9604272,6.72299032 17.6187184,6.38128157 C17.2770097,6.03957281 16.7229903,6.03957281 16.3812816,6.38128157 L9.38128157,13.3812816 C9.03957281,13.7229903 9.03957281,14.2770097 9.38128157,14.6187184 L16.3812816,21.6187184 C16.7229903,21.9604272 17.2770097,21.9604272 17.6187184,21.6187184 C17.9604272,21.2770097 17.9604272,20.7229903 17.6187184,20.3812816 L11.2374369,14 L11.2374369,14 Z" fill="#FFFFFF"></path>\n    </g>\n</svg>', "image/svg+xml").firstChild;
+}
+var TopBackIcon = /* @__PURE__ */ function(_Plugin) {
+  _inherits(TopBackIcon2, _Plugin);
+  var _super = _createSuper(TopBackIcon2);
+  function TopBackIcon2() {
+    _classCallCheck$1(this, TopBackIcon2);
+    return _super.apply(this, arguments);
+  }
+  _createClass$1(TopBackIcon2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      this.initIcons();
+      this.onClick = function(e4) {
+        e4.preventDefault();
+        e4.stopPropagation();
+        _this.config.onClick(e4);
+      };
+      this.bind(["click", "touchend"], this.onClick);
     }
   }, {
-    key: "findFragment",
-    value: function findFragment(index2) {
-      var children = this.root.children;
-      if (index2 < 0 || index2 >= children.length) {
-        return null;
-      }
+    key: "registerIcons",
+    value: function registerIcons() {
       return {
-        dom: children[index2],
-        pos: children[index2].getBoundingClientRect()
+        screenBack: {
+          icon: BackSVG,
+          class: "xg-fullscreen-back"
+        }
       };
     }
   }, {
-    key: "unHightLight",
-    value: function unHightLight() {
-      var children = this.root.children;
-      for (var i2 = 0; i2 < children.length; i2++) {
-        util$3.removeClass(children[i2], this.fragConfig.fragFocusClass);
-      }
-    }
-  }, {
-    key: "setHightLight",
-    value: function setHightLight(index2) {
-      var children = this.root.children;
-      if (index2 < children.length) {
-        util$3.addClass(children[index2], this.fragConfig.fragFocusClass);
-        return {
-          dom: children[index2],
-          pos: children[index2].getBoundingClientRect()
-        };
-      }
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      this.appendChild(this.root, icons.screenBack);
     }
   }, {
-    key: "destroy",
-    value: function destroy() {
-      this.progressList = null;
-      this.fragments = null;
-      this.root.innerHTML = "";
+    key: "show",
+    value: function show() {
+      util$3.addClass(this.root, "show");
     }
   }, {
-    key: "reset",
-    value: function reset(newOptions) {
-      var _this2 = this;
-      Object.keys(this.fragConfig).forEach(function(key) {
-        if (newOptions[key] !== void 0) {
-          _this2.fragConfig[key] = newOptions[key];
-        }
-      });
-      if (newOptions.fragments) {
-        this.fragments = newOptions.fragments.length === 0 ? [{
-          percent: 1
-        }] : newOptions.fragments;
-        this.updateDuration(this.duration);
-        this.playedIndex = 0;
-        this.cachedIndex = 0;
-        if (this.root) {
-          var _c = this.root.children;
-          while (_c.length > 0) {
-            this.root.removeChild(_c[0]);
-          }
-        }
-        this.render();
-      }
+    key: "hide",
+    value: function hide() {
+      util$3.removeClass(this.root, "show");
     }
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-      var progressColor = this.style.progressColor;
-      if (!this.root) {
-        this.root = util$3.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 = util$3.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(util$3.createDom(item2.tag, "", {
-              style: item2.styleKey ? "background: ".concat(_this3.style[item2.styleKey], "; width:0;") : "width:0;"
-            }, item2.className));
-          });
-          return {
-            cached: inner.children[0],
-            played: inner.children[1]
-          };
-        });
-      }
-      return this.root;
+      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 InnerList2;
-}();
-var FRAGMENT_FOCUS_CLASS = {
-  POINT: "inner-focus-point",
-  HIGHLIGHT: "inner-focus-highlight"
-};
-var Progress = /* @__PURE__ */ function(_Plugin) {
-  _inherits(Progress2, _Plugin);
-  var _super = _createSuper(Progress2);
-  function Progress2(args) {
+  return TopBackIcon2;
+}(Plugin);
+function FullScreenSvg() {
+  return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="2 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M598 214h212v212h-84v-128h-128v-84zM726 726v-128h84v212h-212v-84h128zM214 426v-212h212v84h-128v128h-84zM298 598v128h128v84h-212v-212h84z"></path>\n</svg>\n', "image/svg+xml").firstChild;
+}
+function ExitFullScreenSvg() {
+  return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="2 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z"></path>\n</svg>\n', "image/svg+xml").firstChild;
+}
+var Fullscreen = /* @__PURE__ */ function(_IconPlugin) {
+  _inherits(Fullscreen2, _IconPlugin);
+  var _super = _createSuper(Fullscreen2);
+  function Fullscreen2() {
     var _this;
-    _classCallCheck$1(this, Progress2);
-    _this = _super.call(this, args);
-    _defineProperty$1(_assertThisInitialized(_this), "onMoveOnly", function(e4, data) {
-      var _assertThisInitialize = _assertThisInitialized(_this), pos = _assertThisInitialize.pos, config = _assertThisInitialize.config, player = _assertThisInitialize.player;
-      var ret = data;
-      if (e4) {
-        util$3.event(e4);
-        var _ePos = util$3.getEventPos(e4, player.zoom);
-        var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
-        if (pos.moving && Math.abs(pos.x - x2) < config.miniMoveStep) {
-          return;
+    _classCallCheck$1(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$1(_assertThisInitialized(_this), "_onOrientationChange", function(e4) {
+      if (_this.player.fullscreen && _this.config.rotateFullscreen) {
+        if (window.orientation === 90 || window.orientation === -90) {
+          _this.player.setRotateDeg(0);
+        } else {
+          _this.player.setRotateDeg(90);
         }
-        pos.moving = true;
-        pos.x = x2;
-        ret = _this.computeTime(e4, x2);
-      }
-      _this.triggerCallbacks("dragmove", ret, e4);
-      _this._updateInnerFocus(ret);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onBodyClick", function(e4) {
-      if (!_this.pos.isLocked) {
-        return;
       }
-      _this.pos.isLocked = false;
-      e4.preventDefault();
-      e4.stopPropagation();
     });
-    _defineProperty$1(_assertThisInitialized(_this), "_mouseDownHandler", function(event, data) {
-      _this._state.time = data.currentTime;
-      _this.updateWidth(data.currentTime, data.seekTime, data.percent, 0);
-      _this._updateInnerFocus(data);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "_mouseUpHandler", function(e4, data) {
-      var _assertThisInitialize2 = _assertThisInitialized(_this), pos = _assertThisInitialize2.pos;
-      pos.moving && _this.updateWidth(data.currentTime, data.seekTime, data.percent, 2);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "_mouseMoveHandler", function(e4, data) {
-      var _assertThisInitialize3 = _assertThisInitialized(_this), _state = _assertThisInitialize3._state, pos = _assertThisInitialize3.pos, config = _assertThisInitialize3.config, player = _assertThisInitialize3.player;
-      if (_state.time < data.currentTime) {
-        data.forward = true;
-      } else {
-        data.forward = false;
-      }
-      _state.time = data.currentTime;
-      if (pos.isDown && !pos.moving) {
-        pos.moving = true;
-        config.isPauseMoving && player.pause();
-        _this.triggerCallbacks("dragstart", data, e4);
-        _this.emitUserAction("drag", "dragstart", data);
-      }
-      _this.updateWidth(data.currentTime, data.seekTime, data.percent, 1);
-      _this.triggerCallbacks("dragmove", data, e4);
-      _this._updateInnerFocus(data);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onMouseDown", function(e4) {
-      var _assertThisInitialize4 = _assertThisInitialized(_this), _state = _assertThisInitialize4._state, player = _assertThisInitialize4.player, pos = _assertThisInitialize4.pos, config = _assertThisInitialize4.config, playerConfig = _assertThisInitialize4.playerConfig;
-      var _ePos = util$3.getEventPos(e4, player.zoom);
-      var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
-      if (player.isMini || config.closeMoveSeek || !playerConfig.allowSeekAfterEnded && player.ended) {
-        return;
-      }
-      if (!player.duration && !player.isPlaying) {
-        player.play();
+    return _this;
+  }
+  _createClass$1(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;
       }
-      e4.stopPropagation();
-      _this.focus();
-      util$3.checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
-      util$3.checkIsFunction(config.onMoveStart) && config.onMoveStart();
-      util$3.event(e4);
-      pos.x = x2;
-      pos.isDown = true;
-      pos.moving = false;
-      _state.prePlayTime = player.currentTime;
-      player.focus({
-        autoHide: false
-      });
-      _this.isProgressMoving = true;
-      util$3.addClass(_this.progressBtn, "active");
-      var ret = _this.computeTime(e4, x2);
-      ret.prePlayTime = _state.prePlayTime;
-      _this._mouseDownHandlerHook(e4, ret);
-      var eventType = e4.type;
-      if (eventType === "touchstart") {
-        _this.root.addEventListener("touchmove", _this.onMouseMove);
-        _this.root.addEventListener("touchend", _this.onMouseUp);
-        _this.root.addEventListener("touchcancel", _this.onMouseUp);
-      } else {
-        _this.unbind("mousemove", _this.onMoveOnly);
-        document.addEventListener("mousemove", _this.onMouseMove, false);
-        document.addEventListener("mouseup", _this.onMouseUp, false);
+      if (config.target) {
+        this.playerConfig.fullscreenTarget = this.config.target;
       }
-      return true;
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onMouseUp", function(e4) {
-      var _assertThisInitialize5 = _assertThisInitialized(_this), player = _assertThisInitialize5.player, config = _assertThisInitialize5.config, pos = _assertThisInitialize5.pos, playerConfig = _assertThisInitialize5.playerConfig, _state = _assertThisInitialize5._state;
-      e4.stopPropagation();
-      e4.preventDefault();
-      util$3.checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
-      util$3.checkIsFunction(config.onMoveEnd) && config.onMoveEnd();
-      util$3.event(e4);
-      util$3.removeClass(_this.progressBtn, "active");
-      var ret = _this.computeTime(e4, pos.x);
-      ret.prePlayTime = _state.prePlayTime;
-      if (pos.moving) {
-        _this.triggerCallbacks("dragend", ret, e4);
-        _this.emitUserAction("drag", "dragend", ret);
-      } else {
-        _this.triggerCallbacks("click", ret, e4);
-        _this.emitUserAction("click", "click", ret);
+      var fullEl = util$3.getFullScreenEl();
+      if (playerConfig.fullscreenTarget === fullEl) {
+        this.player.getFullscreen().catch(function(e4) {
+        });
       }
-      _this._mouseUpHandlerHook(e4, ret);
-      pos.moving = false;
-      pos.isDown = false;
-      pos.x = 0;
-      pos.y = 0;
-      pos.isLocked = true;
-      _state.prePlayTime = 0;
-      _state.time = 0;
-      var eventType = e4.type;
-      if (eventType === "touchend" || eventType === "touchcancel") {
-        _this.root.removeEventListener("touchmove", _this.onMouseMove);
-        _this.root.removeEventListener("touchend", _this.onMouseUp);
-        _this.root.removeEventListener("touchcancel", _this.onMouseUp);
-        _this.blur();
-      } else {
-        document.removeEventListener("mousemove", _this.onMouseMove, false);
-        document.removeEventListener("mouseup", _this.onMouseUp, false);
-        if (!pos.isEnter) {
-          _this.onMouseLeave(e4);
-        } else {
-          playerConfig.isMobileSimulateMode !== "mobile" && _this.bind("mousemove", _this.onMoveOnly);
+      this.initIcons();
+      this.handleFullscreen = this.hook("fullscreenChange", this.toggleFullScreen, {
+        pre: function pre(e4) {
+          var fullscreen = _this2.player.fullscreen;
+          _this2.emitUserAction(e4, "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(e4) {
+                _this2.handleFullscreen(e4);
+              }
+            }
+          }
+        });
       }
-      util$3.setTimeout(_assertThisInitialized(_this), function() {
-        _this.resetSeekState();
-      }, 1);
-      player.focus();
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onMouseMove", function(e4) {
-      var _assertThisInitialize6 = _assertThisInitialized(_this), _state = _assertThisInitialize6._state, pos = _assertThisInitialize6.pos, player = _assertThisInitialize6.player, config = _assertThisInitialize6.config;
-      if (util$3.checkTouchSupport()) {
-        e4.preventDefault();
-      }
-      util$3.event(e4);
-      var _ePos = util$3.getEventPos(e4, player.zoom);
-      var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
-      var diff = Math.abs(pos.x - x2);
-      if (pos.moving && diff < config.miniMoveStep || !pos.moving && diff < config.miniStartStep) {
-        return;
-      }
-      pos.x = x2;
-      var ret = _this.computeTime(e4, x2);
-      ret.prePlayTime = _state.prePlayTime;
-      _this._mouseMoveHandlerHook(e4, ret);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onMouseOut", function(e4) {
-      _this.triggerCallbacks("mouseout", null, e4);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onMouseOver", function(e4) {
-      _this.triggerCallbacks("mouseover", null, e4);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onMouseEnter", function(e4) {
-      var _assertThisInitialize7 = _assertThisInitialized(_this), player = _assertThisInitialize7.player, pos = _assertThisInitialize7.pos;
-      if (pos.isDown || pos.isEnter || player.isMini || !player.config.allowSeekAfterEnded && player.ended) {
-        return;
-      }
-      pos.isEnter = true;
-      _this.bind("mousemove", _this.onMoveOnly);
-      _this.bind("mouseleave", _this.onMouseLeave);
-      util$3.event(e4);
-      var _ePos = util$3.getEventPos(e4, player.zoom);
-      var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
-      var ret = _this.computeTime(e4, x2);
-      _this.triggerCallbacks("mouseenter", ret, e4);
-      _this.focus();
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onMouseLeave", function(e4) {
-      _this.triggerCallbacks("mouseleave", null, e4);
-      _this.unlock();
-      _this._updateInnerFocus(null);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "onVideoResize", function() {
-      var _this$pos = _this.pos, x2 = _this$pos.x, isDown = _this$pos.isDown, isEnter = _this$pos.isEnter;
-      if (isEnter && !isDown) {
-        var ret = _this.computeTime(null, x2);
-        _this.onMoveOnly(null, ret);
+      if (sniffer.device === "mobile") {
+        window.addEventListener("orientationchange", this._onOrientationChange);
       }
-    });
-    _this.useable = false;
-    _this.isProgressMoving = false;
-    _this.__dragCallBacks = [];
-    _this._state = {
-      now: -1,
-      direc: 0,
-      time: 0,
-      prePlayTime: -1
-    };
-    _this._disableBlur = false;
-    if (typeof _this.config.isDragingSeek === "boolean") {
-      console.warn("[XGPLAYER] 'isDragingSeek' is deprecated, please use 'isDraggingSeek' instead");
-      _this.config.isDraggingSeek = _this.config.isDragingSeek;
-    }
-    return _this;
-  }
-  _createClass$1(Progress2, [{
-    key: "offsetDuration",
-    get: function get() {
-      return this.playerConfig.customDuration || this.player.offsetDuration || this.player.duration;
     }
   }, {
-    key: "duration",
-    get: function get() {
-      return this.playerConfig.customDuration || this.player.duration;
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        fullscreen: {
+          icon: FullScreenSvg,
+          class: "xg-get-fullscreen"
+        },
+        exitFullscreen: {
+          icon: ExitFullScreenSvg,
+          class: "xg-exit-fullscreen"
+        }
+      };
     }
   }, {
-    key: "timeOffset",
-    get: function get() {
-      return this.playerConfig.timeOffset || 0;
+    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: "currentTime",
-    get: function get() {
-      var _this$player = this.player, offsetCurrentTime = _this$player.offsetCurrentTime, currentTime = _this$player.currentTime;
-      return offsetCurrentTime >= 0 ? offsetCurrentTime : currentTime + this.timeOffset;
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      this.appendChild(".xgplayer-icon", icons.fullscreen);
+      this.appendChild(".xgplayer-icon", icons.exitFullscreen);
     }
   }, {
-    key: "changeState",
-    value: function changeState() {
-      var useable = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
-      this.useable = useable;
+    key: "toggleFullScreen",
+    value: function toggleFullScreen(e4) {
+      if (e4 instanceof Event) {
+        e4.preventDefault();
+        e4.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();
+          if (config.useScreenOrientation) {
+            this.unlockScreen();
+          }
+        } else {
+          player.getFullscreen().catch(function(e22) {
+          });
+          if (config.useScreenOrientation && player.aspectRatio > 1) {
+            this.lockScreen(config.lockOrientationType);
+          }
+        }
+      }
     }
   }, {
-    key: "show",
-    value: function show(value) {
-      this.root && (this.root.style.display = "flex");
+    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: "_initInner",
-    value: function _initInner() {
-      var _this2 = this;
-      var fragments = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-      var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      if (!fragments || fragments.length === 0) {
-        fragments = [{
-          percent: 1
-        }];
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
+        return;
       }
-      var _c = _objectSpread2(_objectSpread2({
-        fragments
-      }, config), {}, {
-        actionCallback: function actionCallback(data) {
-          _this2.emitUserAction("fragment_focus", "fragment_focus", data);
-        }
-      });
-      if (!this.innerList) {
-        this.innerList = new InnerList(_c);
-        this.outer.insertBefore(this.innerList.render(), this.outer.children[0]);
-        ["findHightLight", "unHightLight", "setHightLight", "findFragment"].map(function(item) {
-          _this2[item] = _this2.innerList[item].bind(_this2.innerList);
+      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: "lockScreen",
+    value: function lockScreen(orientation) {
+      try {
+        screen.orientation.lock(orientation).catch(function(e4) {
         });
-      } else {
-        this.innerList.reset(_c);
+      } catch (e4) {
       }
     }
   }, {
-    key: "_updateInnerFocus",
-    value: function _updateInnerFocus(data) {
-      this.innerList && this.innerList.updateFocus(data);
+    key: "unlockScreen",
+    value: function unlockScreen() {
+      try {
+        screen.orientation.unlock().catch(function(e4) {
+        });
+      } catch (e4) {
+      }
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "fullscreen";
     }
   }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 0,
+        useCssFullscreen: false,
+        rotateFullscreen: false,
+        useScreenOrientation: false,
+        lockOrientationType: "landscape",
+        switchCallback: null,
+        target: null,
+        disable: false,
+        needBackIcon: false
+      };
+    }
+  }]);
+  return Fullscreen2;
+}(Icon);
+function PlayIcon() {
+  return new DOMParser().parseFromString('<svg class="play" xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="3 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"></path>\n</svg>\n', "image/svg+xml").firstChild;
+}
+function PauseIcon() {
+  return new DOMParser().parseFromString('<svg class="pause" xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="3 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z"></path>\n</svg>\n', "image/svg+xml").firstChild;
+}
+var Play = /* @__PURE__ */ function(_IconPlugin) {
+  _inherits(Play2, _IconPlugin);
+  var _super = _createSuper(Play2);
+  function Play2() {
+    var _this;
+    _classCallCheck$1(this, Play2);
+    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$1(_assertThisInitialized(_this), "btnClick", function(e4) {
+      e4.preventDefault();
+      e4.stopPropagation();
+      var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player;
+      _this.emitUserAction(e4, "switch_play_pause", {
+        prop: "paused",
+        from: player.paused,
+        to: !player.paused
+      });
+      if (player.ended) {
+        player.replay();
+      } else if (player.paused) {
+        player.play();
+        _this.animate(false);
+      } else {
+        player.pause();
+        _this.animate(true);
+      }
+      return false;
+    });
+    return _this;
+  }
+  _createClass$1(Play2, [{
     key: "afterCreate",
     value: function afterCreate() {
-      if (this.config.disable || this.playerConfig.isLive) {
+      _get(_getPrototypeOf(Play2.prototype), "afterCreate", this).call(this);
+      var config = this.config;
+      if (config.disable) {
         return;
       }
-      this.pos = {
-        x: 0,
-        y: 0,
-        moving: false,
-        isDown: false,
-        isEnter: false,
-        isLocked: false
-      };
-      this.outer = this.find("xg-outer");
-      var _this$config = this.config, fragFocusClass = _this$config.fragFocusClass, fragAutoFocus = _this$config.fragAutoFocus, fragClass = _this$config.fragClass;
-      this._initInner(this.config.fragments, {
-        fragFocusClass,
-        fragAutoFocus,
-        fragClass,
-        style: this.playerConfig.commonStyle || {}
-      });
-      if (sniffer.device === "mobile") {
-        this.config.isDraggingSeek = false;
-        this.isMobile = true;
-      }
-      this.progressBtn = this.find(".xgplayer-progress-btn");
+      this.initIcons();
+      this.bind(["touchend", "click"], this.btnClick);
       this.listenEvents();
-      this.bindDomEvents();
-      this.initCustomStyle();
+      this.animate(true);
     }
   }, {
     key: "listenEvents",
     value: function listenEvents() {
-      var _this3 = this;
-      this.on(DURATION_CHANGE, function() {
-        _this3.onMouseLeave();
-      });
-      this.on(TIME_UPDATE, function() {
-        _this3.onTimeupdate();
-      });
-      this.on(SEEKED, function() {
-        _this3.onTimeupdate();
-        _this3.onCacheUpdate();
-      });
-      this.on(PROGRESS, function() {
-        _this3.onCacheUpdate();
-      });
-      this.on(ENDED, function() {
-        _this3.onCacheUpdate(true);
-        _this3.onTimeupdate(true);
-        _this3._state.now = 0;
-      });
-      this.on(EMPTIED, function() {
-        _this3.onReset();
-      });
-      this.on(VIDEO_RESIZE, function() {
-        _this3.onVideoResize();
-      });
-    }
-  }, {
-    key: "setConfig",
-    value: function setConfig(config) {
-      var _this4 = this;
-      var frags = null;
-      Object.keys(config).forEach(function(key) {
-        _this4.config[key] = config[key];
-        if (key === "fragments") {
-          frags = config[key];
-        }
+      var _this2 = this;
+      var player = this.player;
+      this.on([PLAY, PAUSE, ERROR, EMPTIED], function() {
+        _this2.animate(player.paused);
       });
-      if (frags) {
-        this._initInner(frags, config);
-      }
     }
   }, {
-    key: "initCustomStyle",
-    value: function initCustomStyle() {
-      var _ref = this.playerConfig || {}, commonStyle = _ref.commonStyle;
-      var sliderBtnStyle = commonStyle.sliderBtnStyle;
-      var progressBtn = this.progressBtn;
-      if (sliderBtnStyle) {
-        if (typeof sliderBtnStyle === "string") {
-          progressBtn.style.boxShadow = sliderBtnStyle;
-        } else if (_typeof$1(sliderBtnStyle) === "object") {
-          Object.keys(sliderBtnStyle).map(function(key) {
-            progressBtn.style[key] = sliderBtnStyle[key];
-          });
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        play: {
+          icon: PlayIcon,
+          class: "xg-icon-play"
+        },
+        pause: {
+          icon: PauseIcon,
+          class: "xg-icon-pause"
         }
-      }
+      };
     }
   }, {
-    key: "triggerCallbacks",
-    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, event);
-            } catch (error) {
-              console.error("[XGPLAYER][triggerCallbacks] ".concat(item, " error"), error);
-            }
-          }
-        });
-      }
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      this.appendChild(".xgplayer-icon", icons.play);
+      this.appendChild(".xgplayer-icon", icons.pause);
     }
   }, {
-    key: "addCallBack",
-    value: function addCallBack(type, handle) {
-      if (handle && typeof handle === "function") {
-        this.__dragCallBacks.push({
-          type,
-          handler: handle
-        });
+    key: "animate",
+    value: function animate(paused) {
+      if (!this.player) {
+        return;
+      }
+      var i18nKeys = this.i18nKeys;
+      var tipDom = this.find(".xg-tips");
+      if (paused) {
+        this.setAttr("data-state", "pause");
+        tipDom && this.changeLangTextKey(tipDom, i18nKeys.PLAY_TIPS);
+      } else {
+        this.setAttr("data-state", "play");
+        tipDom && this.changeLangTextKey(tipDom, i18nKeys.PAUSE_TIPS);
       }
     }
   }, {
-    key: "removeCallBack",
-    value: function removeCallBack(type, event) {
-      var __dragCallBacks = this.__dragCallBacks;
-      var _index = -1;
-      __dragCallBacks.map(function(item, index2) {
-        if (item && item.type === type && item.handler === event) {
-          _index = index2;
-        }
-      });
-      if (_index > -1) {
-        __dragCallBacks.splice(_index, 1);
-      }
+    key: "destroy",
+    value: function destroy() {
+      _get(_getPrototypeOf(Play2.prototype), "destroy", this).call(this);
+      this.unbind(["touchend", "click"], this.btnClick);
     }
   }, {
-    key: "unlock",
-    value: function unlock() {
-      var player = this.player, pos = this.pos;
-      pos.isEnter = false;
-      pos.isLocked = false;
-      if (player.isMini) {
-        return;
-      }
-      this.unbind("mousemove", this.onMoveOnly);
-      if (pos.isDown) {
-        this.unbind("mouseleave", this.onMouseLeave);
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
         return;
       }
-      this.blur();
+      return '<xg-icon class="xgplayer-play">\n    <div class="xgplayer-icon">\n    </div>\n    '.concat(xgIconTips(this, "PLAY_TIPS", this.playerConfig.isHideTips), "\n    </xg-icon>");
     }
-  }, {
-    key: "bindDomEvents",
-    value: function bindDomEvents() {
-      var config = this.player.config;
-      this._mouseDownHandlerHook = this.hook("dragstart", this._mouseDownHandler);
-      this._mouseUpHandlerHook = this.hook("dragend", this._mouseUpHandler);
-      this._mouseMoveHandlerHook = this.hook("drag", this._mouseMoveHandler);
-      if (this.domEventType === "touch" || this.domEventType === "compatible") {
-        this.root.addEventListener("touchstart", this.onMouseDown);
-      }
-      if (this.domEventType === "mouse" || this.domEventType === "compatible") {
-        this.bind("mousedown", this.onMouseDown);
-        config.isMobileSimulateMode !== "mobile" && this.bind("mouseenter", this.onMouseEnter);
-        this.bind("mouseover", this.onMouseOver);
-        this.bind("mouseout", this.onMouseOut);
-        this.player.root.addEventListener("click", this.onBodyClick, true);
-      }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "play";
     }
   }, {
-    key: "focus",
-    value: function focus() {
-      this.player.controls.pauseAutoHide();
-      util$3.addClass(this.root, "active");
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_LEFT,
+        index: 0,
+        disable: false
+      };
     }
-  }, {
-    key: "blur",
-    value: function blur() {
-      if (this._disableBlur) {
-        return;
-      }
-      this.player.controls.recoverAutoHide();
-      util$3.removeClass(this.root, "active");
+  }]);
+  return Play2;
+}(Icon);
+var TPL = [{
+  tag: "xg-cache",
+  className: "xgplayer-progress-cache",
+  styleKey: "cachedColor"
+}, {
+  tag: "xg-played",
+  className: "xgplayer-progress-played",
+  styleKey: "playedColor"
+}];
+var InnerList = /* @__PURE__ */ function() {
+  function InnerList2(args) {
+    _classCallCheck$1(this, InnerList2);
+    this.fragments = args.fragments || [];
+    if (this.fragments.length === 0) {
+      this.fragments.push({
+        percent: 1
+      });
     }
-  }, {
-    key: "disableBlur",
-    value: function disableBlur() {
-      this._disableBlur = true;
+    this._callBack = args.actionCallback;
+    this.fragConfig = {
+      fragFocusClass: args.fragFocusClass || "inner-focus-point",
+      fragAutoFocus: !!args.fragAutoFocus,
+      fragClass: args.fragClass || ""
+    };
+    this.style = args.style || {
+      playedColor: "",
+      cachedColor: "",
+      progressColor: ""
+    };
+    this.duration = 0;
+    this.cachedIndex = 0;
+    this.playedIndex = 0;
+    this.focusIndex = -1;
+  }
+  _createClass$1(InnerList2, [{
+    key: "updateDuration",
+    value: function updateDuration(duration) {
+      var _this = this;
+      this.duration = duration;
+      var start = 0;
+      var fragments = this.fragments;
+      this.fragments = fragments.map(function(item) {
+        item.start = parseInt(start, 10);
+        item.end = parseInt(start + item.percent * _this.duration, 10);
+        item.duration = parseInt(item.percent * _this.duration, 10);
+        start += item.percent * _this.duration;
+        return item;
+      });
     }
   }, {
-    key: "enableBlur",
-    value: function enableBlur() {
-      this._disableBlur = false;
+    key: "updateProgress",
+    value: function updateProgress() {
+      var type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "played";
+      var data = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+        newIndex: 0,
+        curIndex: 0,
+        millisecond: 0
+      };
+      var progressList = this.progressList, fragments = this.fragments;
+      if (progressList.length < 1) {
+        return;
+      }
+      var newIndex = data.newIndex, curIndex = data.curIndex, millisecond = data.millisecond;
+      if (newIndex !== curIndex) {
+        progressList.map(function(item, index2) {
+          if (index2 < newIndex) {
+            item[type].style.width = "100%";
+          } else if (index2 > newIndex) {
+            item[type].style.width = 0;
+          }
+        });
+      }
+      var curPFrag = fragments[newIndex];
+      var per = millisecond === 0 ? 0 : (millisecond - curPFrag.start) / curPFrag.duration;
+      progressList[newIndex][type].style.width = per < 0 ? 0 : "".concat(per * 100, "%");
     }
   }, {
-    key: "updateWidth",
-    value: function updateWidth(currentTime, seekTime, percent, type) {
-      var config = this.config, player = this.player;
-      if (config.isCloseClickSeek && type === 0) {
+    key: "updateFocus",
+    value: function updateFocus(data) {
+      if (!this.fragConfig.fragAutoFocus || this.fragments.length < 2) {
         return;
       }
-      var realTime = seekTime = seekTime >= player.duration ? player.duration - config.endedDiff : Number(seekTime).toFixed(1);
-      this.updatePercent(percent);
-      this.updateTime(currentTime);
-      if (type === 1 && (!config.isDraggingSeek || player.config.mediaType === "audio")) {
+      if (!data) {
+        if (this.focusIndex > -1) {
+          this.unHightLight(this.focusIndex);
+          var _data = {
+            index: -1,
+            preIndex: this.focusIndex,
+            fragment: null
+          };
+          this._callBack && this._callBack(_data);
+          this.focusIndex = -1;
+        }
         return;
       }
-      this._state.now = realTime;
-      this._state.direc = realTime > player.currentTime ? 0 : 1;
-      player.seek(realTime);
-    }
-  }, {
-    key: "computeTime",
-    value: function computeTime(e4, x2) {
-      var player = this.player;
-      var _this$root$getBoundin = this.root.getBoundingClientRect(), width = _this$root$getBoundin.width, height = _this$root$getBoundin.height, top = _this$root$getBoundin.top, left = _this$root$getBoundin.left;
-      var rWidth, rLeft;
-      var clientX = x2;
-      if (player.rotateDeg === 90) {
-        rWidth = height;
-        rLeft = top;
-      } else {
-        rWidth = width;
-        rLeft = left;
+      var newPIndex = this.findIndex(data.currentTime * 1e3, this.focusIndex);
+      if (newPIndex >= 0 && newPIndex !== this.focusIndex) {
+        this.focusIndex > -1 && this.unHightLight(this.focusIndex);
+        this.setHightLight(newPIndex);
+        var _data2 = {
+          index: newPIndex,
+          preIndex: this.focusIndex,
+          fragment: this.fragments[this.focusIndex]
+        };
+        this.focusIndex = newPIndex;
+        this._callBack && this._callBack(_data2);
       }
-      var offset = clientX - rLeft;
-      offset = offset > rWidth ? rWidth : offset < 0 ? 0 : offset;
-      var percent = offset / rWidth;
-      percent = percent < 0 ? 0 : percent > 1 ? 1 : percent;
-      var currentTime = parseInt(percent * this.offsetDuration * 1e3, 10) / 1e3;
-      var seekTime = util$3.getCurrentTimeByOffset(currentTime, player.timeSegments);
-      return {
-        percent,
-        currentTime,
-        seekTime,
-        offset,
-        width: rWidth,
-        left: rLeft,
-        e: e4
-      };
     }
   }, {
-    key: "updateTime",
-    value: function updateTime(time) {
-      var player = this.player, duration = this.duration;
-      if (time > duration) {
-        time = duration;
-      } else if (time < 0) {
-        time = 0;
+    key: "update",
+    value: function update() {
+      var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        cached: 0,
+        played: 0
+      };
+      var duration = arguments.length > 1 ? arguments[1] : void 0;
+      if (!this.duration || parseInt(duration * 1e3, 10) !== this.duration) {
+        if (!duration && duration !== 0) {
+          return;
+        }
+        this.updateDuration(parseInt(duration * 1e3, 10));
       }
-      var timeIcon = player.plugins.time;
-      if (timeIcon) {
-        timeIcon.updateTime(time);
+      var playedIndex = this.playedIndex, cachedIndex = this.cachedIndex;
+      if (util$3.typeOf(data.played) !== "Undefined") {
+        var newPIndex = this.findIndex(data.played * 1e3, playedIndex);
+        if (newPIndex < 0) {
+          return;
+        }
+        this.updateProgress("played", {
+          newIndex: newPIndex,
+          curIndex: playedIndex,
+          millisecond: parseInt(data.played * 1e3, 10)
+        });
+        this.playedIndex = newPIndex;
+      }
+      if (util$3.typeOf(data.cached) !== "Undefined") {
+        var newCIndex = this.findIndex(data.cached * 1e3, cachedIndex);
+        if (newCIndex < 0) {
+          return;
+        }
+        this.updateProgress("cached", {
+          newIndex: newCIndex,
+          curIndex: cachedIndex,
+          millisecond: parseInt(data.cached * 1e3, 10)
+        });
+        this.cachedIndex = newCIndex;
       }
     }
   }, {
-    key: "resetSeekState",
-    value: function resetSeekState() {
-      this.isProgressMoving = false;
-      var timeIcon = this.player.plugins.time;
-      timeIcon && timeIcon.resetActive();
+    key: "findIndex",
+    value: function findIndex(time, curIndex) {
+      var fragments = this.fragments;
+      if (!fragments || fragments.length === 0) {
+        return -1;
+      }
+      if (fragments.length === 1) {
+        return 0;
+      }
+      if (curIndex > -1 && curIndex < fragments.length && time > fragments[curIndex].start && time < fragments[curIndex].end) {
+        return curIndex;
+      }
+      if (time > fragments[fragments.length - 1].start) {
+        return fragments.length - 1;
+      }
+      for (var i2 = 0; i2 < fragments.length; i2++) {
+        if (time > fragments[i2].start && time <= fragments[i2].end) {
+          curIndex = i2;
+          break;
+        }
+      }
+      return curIndex;
     }
   }, {
-    key: "updatePercent",
-    value: function updatePercent(percent, notSeek) {
-      this.isProgressMoving = true;
-      if (this.config.disable) {
-        return;
+    key: "findHightLight",
+    value: function findHightLight() {
+      var children = this.root.children;
+      for (var i2 = 0; i2 < children.length; i2++) {
+        if (util$3.hasClass(children[i2], this.fragConfig.fragFocusClass)) {
+          return {
+            dom: children[i2],
+            pos: children[i2].getBoundingClientRect()
+          };
+        }
       }
-      percent = percent > 1 ? 1 : percent < 0 ? 0 : percent;
-      this.progressBtn.style.left = "".concat(percent * 100, "%");
-      this.innerList.update({
-        played: percent * this.offsetDuration
-      }, this.offsetDuration);
-      var miniprogress = this.player.plugins.miniprogress;
-      miniprogress && miniprogress.update({
-        played: percent * this.offsetDuration
-      }, this.offsetDuration);
     }
   }, {
-    key: "onTimeupdate",
-    value: function onTimeupdate(isEnded) {
-      var player = this.player, _state = this._state, offsetDuration = this.offsetDuration;
-      if (player.isSeeking && player.media.seeking || this.isProgressMoving || !player.hasStart) {
-        return;
-      }
-      if (_state.now > -1) {
-        var abs = parseInt(_state.now * 1e3, 10) - parseInt(player.currentTime * 1e3, 10);
-        if (_state.direc === 0 && abs > 300 || _state.direc === 1 && abs > -300) {
-          _state.now = -1;
-          return;
-        } else {
-          _state.now = -1;
-        }
+    key: "findFragment",
+    value: function findFragment(index2) {
+      var children = this.root.children;
+      if (index2 < 0 || index2 >= children.length) {
+        return null;
       }
-      var time = this.currentTime;
-      time = util$3.adjustTimeByDuration(time, offsetDuration, isEnded);
-      this.innerList.update({
-        played: time
-      }, offsetDuration);
-      this.progressBtn.style.left = "".concat(time / offsetDuration * 100, "%");
+      return {
+        dom: children[index2],
+        pos: children[index2].getBoundingClientRect()
+      };
     }
   }, {
-    key: "onCacheUpdate",
-    value: function onCacheUpdate(isEnded) {
-      var player = this.player, duration = this.duration;
-      if (!player) {
-        return;
+    key: "unHightLight",
+    value: function unHightLight() {
+      var children = this.root.children;
+      for (var i2 = 0; i2 < children.length; i2++) {
+        util$3.removeClass(children[i2], this.fragConfig.fragFocusClass);
       }
-      var _end = player.bufferedPoint.end;
-      _end = util$3.adjustTimeByDuration(_end, duration, isEnded);
-      this.innerList.update({
-        cached: _end
-      }, duration);
     }
   }, {
-    key: "onReset",
-    value: function onReset() {
-      this.innerList.update({
-        played: 0,
-        cached: 0
-      }, 0);
-      this.progressBtn.style.left = "0%";
+    key: "setHightLight",
+    value: function setHightLight(index2) {
+      var children = this.root.children;
+      if (index2 < children.length) {
+        util$3.addClass(children[index2], this.fragConfig.fragFocusClass);
+        return {
+          dom: children[index2],
+          pos: children[index2].getBoundingClientRect()
+        };
+      }
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      var player = this.player;
-      this.thumbnailPlugin = null;
-      this.innerList.destroy();
-      this.innerList = null;
-      var domEventType = this.domEventType;
-      if (domEventType === "touch" || domEventType === "compatible") {
-        this.root.removeEventListener("touchstart", this.onMouseDown);
-        this.root.removeEventListener("touchmove", this.onMouseMove);
-        this.root.removeEventListener("touchend", this.onMouseUp);
-        this.root.removeEventListener("touchcancel", this.onMouseUp);
+      this.progressList = null;
+      this.fragments = null;
+      this.root.innerHTML = "";
+    }
+  }, {
+    key: "reset",
+    value: function reset(newOptions) {
+      var _this2 = this;
+      Object.keys(this.fragConfig).forEach(function(key) {
+        if (newOptions[key] !== void 0) {
+          _this2.fragConfig[key] = newOptions[key];
+        }
+      });
+      if (newOptions.fragments) {
+        this.fragments = newOptions.fragments.length === 0 ? [{
+          percent: 1
+        }] : newOptions.fragments;
+        this.updateDuration(this.duration);
+        this.playedIndex = 0;
+        this.cachedIndex = 0;
+        if (this.root) {
+          var _c = this.root.children;
+          while (_c.length > 0) {
+            this.root.removeChild(_c[0]);
+          }
+        }
+        this.render();
       }
-      if (domEventType === "mouse" || domEventType === "compatible") {
-        this.unbind("mousedown", this.onMouseDown);
-        this.unbind("mouseenter", this.onMouseEnter);
-        this.unbind("mousemove", this.onMoveOnly);
-        this.unbind("mouseleave", this.onMouseLeave);
-        document.removeEventListener("mousemove", this.onMouseMove, false);
-        document.removeEventListener("mouseup", this.onMouseUp, false);
-        player.root.removeEventListener("click", this.onBodyClick, true);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var progressColor = this.style.progressColor;
+      if (!this.root) {
+        this.root = util$3.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 = util$3.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(util$3.createDom(item2.tag, "", {
+              style: item2.styleKey ? "background: ".concat(_this3.style[item2.styleKey], "; width:0;") : "width:0;"
+            }, item2.className));
+          });
+          return {
+            cached: inner.children[0],
+            played: inner.children[1]
+          };
+        });
+      }
+      return this.root;
+    }
+  }]);
+  return InnerList2;
+}();
+var FRAGMENT_FOCUS_CLASS = {
+  POINT: "inner-focus-point",
+  HIGHLIGHT: "inner-focus-highlight"
+};
+var Progress = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Progress2, _Plugin);
+  var _super = _createSuper(Progress2);
+  function Progress2(args) {
+    var _this;
+    _classCallCheck$1(this, Progress2);
+    _this = _super.call(this, args);
+    _defineProperty$1(_assertThisInitialized(_this), "onMoveOnly", function(e4, data) {
+      var _assertThisInitialize = _assertThisInitialized(_this), pos = _assertThisInitialize.pos, config = _assertThisInitialize.config, player = _assertThisInitialize.player;
+      var ret = data;
+      if (e4) {
+        util$3.event(e4);
+        var _ePos = util$3.getEventPos(e4, player.zoom);
+        var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
+        if (pos.moving && Math.abs(pos.x - x2) < config.miniMoveStep) {
+          return;
+        }
+        pos.moving = true;
+        pos.x = x2;
+        ret = _this.computeTime(e4, x2);
+      }
+      _this.triggerCallbacks("dragmove", ret, e4);
+      _this._updateInnerFocus(ret);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onBodyClick", function(e4) {
+      if (!_this.pos.isLocked) {
+        return;
+      }
+      _this.pos.isLocked = false;
+      e4.preventDefault();
+      e4.stopPropagation();
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "_mouseDownHandler", function(event, data) {
+      _this._state.time = data.currentTime;
+      _this.updateWidth(data.currentTime, data.seekTime, data.percent, 0);
+      _this._updateInnerFocus(data);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "_mouseUpHandler", function(e4, data) {
+      var _assertThisInitialize2 = _assertThisInitialized(_this), pos = _assertThisInitialize2.pos;
+      pos.moving && _this.updateWidth(data.currentTime, data.seekTime, data.percent, 2);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "_mouseMoveHandler", function(e4, data) {
+      var _assertThisInitialize3 = _assertThisInitialized(_this), _state = _assertThisInitialize3._state, pos = _assertThisInitialize3.pos, config = _assertThisInitialize3.config, player = _assertThisInitialize3.player;
+      if (_state.time < data.currentTime) {
+        data.forward = true;
+      } else {
+        data.forward = false;
+      }
+      _state.time = data.currentTime;
+      if (pos.isDown && !pos.moving) {
+        pos.moving = true;
+        config.isPauseMoving && player.pause();
+        _this.triggerCallbacks("dragstart", data, e4);
+        _this.emitUserAction("drag", "dragstart", data);
+      }
+      _this.updateWidth(data.currentTime, data.seekTime, data.percent, 1);
+      _this.triggerCallbacks("dragmove", data, e4);
+      _this._updateInnerFocus(data);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onMouseDown", function(e4) {
+      var _assertThisInitialize4 = _assertThisInitialized(_this), _state = _assertThisInitialize4._state, player = _assertThisInitialize4.player, pos = _assertThisInitialize4.pos, config = _assertThisInitialize4.config, playerConfig = _assertThisInitialize4.playerConfig;
+      var _ePos = util$3.getEventPos(e4, player.zoom);
+      var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
+      if (player.isMini || config.closeMoveSeek || !playerConfig.allowSeekAfterEnded && player.ended) {
+        return;
+      }
+      if (!player.duration && !player.isPlaying) {
+        player.play();
+        return;
+      }
+      e4.stopPropagation();
+      _this.focus();
+      util$3.checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
+      util$3.checkIsFunction(config.onMoveStart) && config.onMoveStart();
+      util$3.event(e4);
+      pos.x = x2;
+      pos.isDown = true;
+      pos.moving = false;
+      _state.prePlayTime = player.currentTime;
+      player.focus({
+        autoHide: false
+      });
+      _this.isProgressMoving = true;
+      util$3.addClass(_this.progressBtn, "active");
+      var ret = _this.computeTime(e4, x2);
+      ret.prePlayTime = _state.prePlayTime;
+      _this._mouseDownHandlerHook(e4, ret);
+      var eventType = e4.type;
+      if (eventType === "touchstart") {
+        _this.root.addEventListener("touchmove", _this.onMouseMove);
+        _this.root.addEventListener("touchend", _this.onMouseUp);
+        _this.root.addEventListener("touchcancel", _this.onMouseUp);
+      } else {
+        _this.unbind("mousemove", _this.onMoveOnly);
+        document.addEventListener("mousemove", _this.onMouseMove, false);
+        document.addEventListener("mouseup", _this.onMouseUp, false);
+      }
+      return true;
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onMouseUp", function(e4) {
+      var _assertThisInitialize5 = _assertThisInitialized(_this), player = _assertThisInitialize5.player, config = _assertThisInitialize5.config, pos = _assertThisInitialize5.pos, playerConfig = _assertThisInitialize5.playerConfig, _state = _assertThisInitialize5._state;
+      if (!pos) {
+        return;
+      }
+      e4.stopPropagation();
+      e4.preventDefault();
+      util$3.checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
+      util$3.checkIsFunction(config.onMoveEnd) && config.onMoveEnd();
+      util$3.event(e4);
+      util$3.removeClass(_this.progressBtn, "active");
+      var ret = _this.computeTime(e4, pos.x);
+      ret.prePlayTime = _state.prePlayTime;
+      if (pos.moving) {
+        _this.triggerCallbacks("dragend", ret, e4);
+        _this.emitUserAction("drag", "dragend", ret);
+      } else {
+        _this.triggerCallbacks("click", ret, e4);
+        _this.emitUserAction("click", "click", ret);
+      }
+      _this._mouseUpHandlerHook(e4, ret);
+      pos.moving = false;
+      pos.isDown = false;
+      pos.x = 0;
+      pos.y = 0;
+      pos.isLocked = true;
+      _state.prePlayTime = 0;
+      _state.time = 0;
+      var eventType = e4.type;
+      if (eventType === "touchend" || eventType === "touchcancel") {
+        _this.root.removeEventListener("touchmove", _this.onMouseMove);
+        _this.root.removeEventListener("touchend", _this.onMouseUp);
+        _this.root.removeEventListener("touchcancel", _this.onMouseUp);
+        _this.blur();
+      } else {
+        document.removeEventListener("mousemove", _this.onMouseMove, false);
+        document.removeEventListener("mouseup", _this.onMouseUp, false);
+        if (!pos.isEnter) {
+          _this.onMouseLeave(e4);
+        } else {
+          playerConfig.isMobileSimulateMode !== "mobile" && _this.bind("mousemove", _this.onMoveOnly);
+        }
+      }
+      util$3.setTimeout(_assertThisInitialized(_this), function() {
+        _this.resetSeekState();
+      }, 1);
+      player.focus();
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onMouseMove", function(e4) {
+      var _assertThisInitialize6 = _assertThisInitialized(_this), _state = _assertThisInitialize6._state, pos = _assertThisInitialize6.pos, player = _assertThisInitialize6.player, config = _assertThisInitialize6.config;
+      if (util$3.checkTouchSupport()) {
+        e4.preventDefault();
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.config.disable || this.playerConfig.isLive) {
+      util$3.event(e4);
+      var _ePos = util$3.getEventPos(e4, player.zoom);
+      var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
+      var diff = Math.abs(pos.x - x2);
+      if (pos.moving && diff < config.miniMoveStep || !pos.moving && diff < config.miniStartStep) {
         return;
       }
-      var controlsMode = this.player.controls ? this.player.controls.config.mode : "";
-      var className = controlsMode === "bottom" ? "xgplayer-progress-bottom" : "";
-      return '\n    <xg-progress class="xgplayer-progress '.concat(className, '">\n      <xg-outer class="xgplayer-progress-outer">\n        <xg-progress-btn class="xgplayer-progress-btn"></xg-progress-btn>\n      </xg-outer>\n    </xg-progress>\n    ');
+      pos.x = x2;
+      var ret = _this.computeTime(e4, x2);
+      ret.prePlayTime = _state.prePlayTime;
+      _this._mouseMoveHandlerHook(e4, ret);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onMouseOut", function(e4) {
+      _this.triggerCallbacks("mouseout", null, e4);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onMouseOver", function(e4) {
+      _this.triggerCallbacks("mouseover", null, e4);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onMouseEnter", function(e4) {
+      var _assertThisInitialize7 = _assertThisInitialized(_this), player = _assertThisInitialize7.player, pos = _assertThisInitialize7.pos;
+      if (pos.isDown || pos.isEnter || player.isMini || !player.config.allowSeekAfterEnded && player.ended) {
+        return;
+      }
+      pos.isEnter = true;
+      _this.bind("mousemove", _this.onMoveOnly);
+      _this.bind("mouseleave", _this.onMouseLeave);
+      util$3.event(e4);
+      var _ePos = util$3.getEventPos(e4, player.zoom);
+      var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
+      var ret = _this.computeTime(e4, x2);
+      _this.triggerCallbacks("mouseenter", ret, e4);
+      _this.focus();
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onMouseLeave", function(e4) {
+      _this.triggerCallbacks("mouseleave", null, e4);
+      _this.unlock();
+      _this._updateInnerFocus(null);
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "onVideoResize", function() {
+      var _this$pos = _this.pos, x2 = _this$pos.x, isDown = _this$pos.isDown, isEnter = _this$pos.isEnter;
+      if (isEnter && !isDown) {
+        var ret = _this.computeTime(null, x2);
+        _this.onMoveOnly(null, ret);
+      }
+    });
+    _this.useable = false;
+    _this.isProgressMoving = false;
+    _this.__dragCallBacks = [];
+    _this._state = {
+      now: -1,
+      direc: 0,
+      time: 0,
+      prePlayTime: -1
+    };
+    _this._disableBlur = false;
+    if (typeof _this.config.isDragingSeek === "boolean") {
+      console.warn("[XGPLAYER] 'isDragingSeek' is deprecated, please use 'isDraggingSeek' instead");
+      _this.config.isDraggingSeek = _this.config.isDragingSeek;
     }
-  }], [{
-    key: "pluginName",
+    return _this;
+  }
+  _createClass$1(Progress2, [{
+    key: "offsetDuration",
     get: function get() {
-      return "progress";
+      return this.playerConfig.customDuration || this.player.offsetDuration || this.player.duration;
     }
   }, {
-    key: "defaultConfig",
+    key: "duration",
     get: function get() {
-      return {
-        position: POSITIONS.CONTROLS_CENTER,
-        index: 0,
-        disable: false,
-        isDraggingSeek: true,
-        closeMoveSeek: false,
-        isPauseMoving: false,
-        isCloseClickSeek: false,
-        fragments: [{
-          percent: 1
-        }],
-        fragFocusClass: FRAGMENT_FOCUS_CLASS.POINT,
-        fragClass: "",
-        fragAutoFocus: false,
-        miniMoveStep: 5,
-        miniStartStep: 2,
-        onMoveStart: function onMoveStart() {
-        },
-        onMoveEnd: function onMoveEnd() {
-        },
-        endedDiff: 0.2
-      };
+      return this.playerConfig.customDuration || this.player.duration;
     }
   }, {
-    key: "FRAGMENT_FOCUS_CLASS",
+    key: "timeOffset",
     get: function get() {
-      return FRAGMENT_FOCUS_CLASS;
-    }
-  }]);
-  return Progress2;
-}(Plugin);
-var Icon = /* @__PURE__ */ function(_Plugin) {
-  _inherits(Icon2, _Plugin);
-  var _super = _createSuper(Icon2);
-  function Icon2() {
-    var _this;
-    _classCallCheck$1(this, Icon2);
-    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$1(_assertThisInitialized(_this), "_onMouseenter", function(e4) {
-      _this.emit("icon_mouseenter", {
-        pluginName: _this.pluginName
-      });
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "_onMouseLeave", function(e4) {
-      _this.emit("icon_mouseleave", {
-        pluginName: _this.pluginName
-      });
-    });
-    return _this;
-  }
-  _createClass$1(Icon2, [{
-    key: "afterCreate",
-    value: function afterCreate() {
-      this.bind("mouseenter", this._onMouseenter);
-      this.bind("mouseleave", this._onMouseLeave);
-      if (this.config.disable) {
-        this.disable();
-      }
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this.unbind("mouseenter", this._onMouseenter);
-      this.unbind("mouseleave", this._onMouseLeave);
-    }
-  }]);
-  return Icon2;
-}(Plugin);
-var Play = /* @__PURE__ */ function(_IconPlugin) {
-  _inherits(Play2, _IconPlugin);
-  var _super = _createSuper(Play2);
-  function Play2() {
-    var _this;
-    _classCallCheck$1(this, Play2);
-    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$1(_assertThisInitialized(_this), "btnClick", function(e4) {
-      e4.preventDefault();
-      e4.stopPropagation();
-      var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player;
-      _this.emitUserAction(e4, "switch_play_pause", {
-        prop: "paused",
-        from: player.paused,
-        to: !player.paused
-      });
-      if (player.ended) {
-        player.replay();
-      } else if (player.paused) {
-        player.play();
-        _this.animate(false);
-      } else {
-        player.pause();
-        _this.animate(true);
-      }
-      return false;
-    });
-    return _this;
-  }
-  _createClass$1(Play2, [{
-    key: "afterCreate",
-    value: function afterCreate() {
-      _get(_getPrototypeOf(Play2.prototype), "afterCreate", this).call(this);
-      var config = this.config;
-      if (config.disable) {
-        return;
-      }
-      this.initIcons();
-      this.bind(["touchend", "click"], this.btnClick);
-      this.listenEvents();
-      this.animate(true);
+      return this.playerConfig.timeOffset || 0;
     }
   }, {
-    key: "listenEvents",
-    value: function listenEvents() {
-      var _this2 = this;
-      var player = this.player;
-      this.on([PLAY, PAUSE, ERROR, EMPTIED], function() {
-        _this2.animate(player.paused);
-      });
+    key: "currentTime",
+    get: function get() {
+      var _this$player = this.player, offsetCurrentTime = _this$player.offsetCurrentTime, currentTime = _this$player.currentTime;
+      return offsetCurrentTime >= 0 ? offsetCurrentTime : currentTime + this.timeOffset;
     }
   }, {
-    key: "registerIcons",
-    value: function registerIcons() {
-      return {
-        play: {
-          icon: PlaySvg,
-          class: "xg-icon-play"
-        },
-        pause: {
-          icon: PauseSvg,
-          class: "xg-icon-pause"
-        }
-      };
+    key: "changeState",
+    value: function changeState() {
+      var useable = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+      this.useable = useable;
     }
   }, {
-    key: "initIcons",
-    value: function initIcons() {
-      var icons = this.icons;
-      this.appendChild(".xgplayer-icon", icons.play);
-      this.appendChild(".xgplayer-icon", icons.pause);
+    key: "show",
+    value: function show(value) {
+      this.root && (this.root.style.display = "flex");
     }
   }, {
-    key: "animate",
-    value: function animate(paused) {
-      if (!this.player) {
-        return;
+    key: "_initInner",
+    value: function _initInner() {
+      var _this2 = this;
+      var fragments = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+      var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+      if (!fragments || fragments.length === 0) {
+        fragments = [{
+          percent: 1
+        }];
       }
-      var i18nKeys = this.i18nKeys;
-      var tipDom = this.find(".xg-tips");
-      if (paused) {
-        this.setAttr("data-state", "pause");
-        tipDom && this.changeLangTextKey(tipDom, i18nKeys.PLAY_TIPS);
+      var _c = _objectSpread2(_objectSpread2({
+        fragments
+      }, config), {}, {
+        actionCallback: function actionCallback(data) {
+          _this2.emitUserAction("fragment_focus", "fragment_focus", data);
+        }
+      });
+      if (!this.innerList) {
+        this.innerList = new InnerList(_c);
+        this.outer.insertBefore(this.innerList.render(), this.outer.children[0]);
+        ["findHightLight", "unHightLight", "setHightLight", "findFragment"].map(function(item) {
+          _this2[item] = _this2.innerList[item].bind(_this2.innerList);
+        });
       } else {
-        this.setAttr("data-state", "play");
-        tipDom && this.changeLangTextKey(tipDom, i18nKeys.PAUSE_TIPS);
+        this.innerList.reset(_c);
       }
     }
   }, {
-    key: "destroy",
-    value: function destroy() {
-      _get(_getPrototypeOf(Play2.prototype), "destroy", this).call(this);
-      this.unbind(["touchend", "click"], this.btnClick);
+    key: "_updateInnerFocus",
+    value: function _updateInnerFocus(data) {
+      this.innerList && this.innerList.updateFocus(data);
     }
   }, {
-    key: "render",
-    value: function render() {
-      if (this.config.disable) {
+    key: "afterCreate",
+    value: function afterCreate() {
+      if (this.config.disable || this.playerConfig.isLive) {
         return;
       }
-      return '<xg-icon class="xgplayer-play">\n    <div class="xgplayer-icon">\n    </div>\n    '.concat(xgIconTips(this, "PLAY_TIPS", this.playerConfig.isHideTips), "\n    </xg-icon>");
-    }
-  }], [{
-    key: "pluginName",
-    get: function get() {
-      return "play";
-    }
-  }, {
-    key: "defaultConfig",
-    get: function get() {
-      return {
-        position: POSITIONS.CONTROLS_LEFT,
-        index: 0,
-        disable: false
+      this.pos = {
+        x: 0,
+        y: 0,
+        moving: false,
+        isDown: false,
+        isEnter: false,
+        isLocked: false
       };
+      this.outer = this.find("xg-outer");
+      var _this$config = this.config, fragFocusClass = _this$config.fragFocusClass, fragAutoFocus = _this$config.fragAutoFocus, fragClass = _this$config.fragClass;
+      this._initInner(this.config.fragments, {
+        fragFocusClass,
+        fragAutoFocus,
+        fragClass,
+        style: this.playerConfig.commonStyle || {}
+      });
+      if (sniffer.device === "mobile") {
+        this.config.isDraggingSeek = false;
+        this.isMobile = true;
+      }
+      this.progressBtn = this.find(".xgplayer-progress-btn");
+      this.listenEvents();
+      this.bindDomEvents();
+      this.initCustomStyle();
     }
-  }]);
-  return Play2;
-}(Icon);
-function BackSVG() {
-  return new DOMParser().parseFromString('<svg width="32px" height="40px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <path d="M11.2374369,14 L17.6187184,7.61871843 C17.9604272,7.27700968 17.9604272,6.72299032 17.6187184,6.38128157 C17.2770097,6.03957281 16.7229903,6.03957281 16.3812816,6.38128157 L9.38128157,13.3812816 C9.03957281,13.7229903 9.03957281,14.2770097 9.38128157,14.6187184 L16.3812816,21.6187184 C16.7229903,21.9604272 17.2770097,21.9604272 17.6187184,21.6187184 C17.9604272,21.2770097 17.9604272,20.7229903 17.6187184,20.3812816 L11.2374369,14 L11.2374369,14 Z" fill="#FFFFFF"></path>\n    </g>\n</svg>', "image/svg+xml").firstChild;
-}
-var TopBackIcon = /* @__PURE__ */ function(_Plugin) {
-  _inherits(TopBackIcon2, _Plugin);
-  var _super = _createSuper(TopBackIcon2);
-  function TopBackIcon2() {
-    _classCallCheck$1(this, TopBackIcon2);
-    return _super.apply(this, arguments);
-  }
-  _createClass$1(TopBackIcon2, [{
-    key: "afterCreate",
-    value: function afterCreate() {
-      var _this = this;
-      this.initIcons();
-      this.onClick = function(e4) {
-        e4.preventDefault();
-        e4.stopPropagation();
-        _this.config.onClick(e4);
-      };
-      this.bind(["click", "touchend"], this.onClick);
+  }, {
+    key: "listenEvents",
+    value: function listenEvents() {
+      var _this3 = this;
+      this.on(DURATION_CHANGE, function() {
+        _this3.onMouseLeave();
+      });
+      this.on(TIME_UPDATE, function() {
+        _this3.onTimeupdate();
+      });
+      this.on(SEEKED, function() {
+        _this3.onTimeupdate();
+        _this3.onCacheUpdate();
+      });
+      this.on(PROGRESS, function() {
+        _this3.onCacheUpdate();
+      });
+      this.on(ENDED, function() {
+        _this3.onCacheUpdate(true);
+        _this3.onTimeupdate(true);
+        _this3._state.now = 0;
+      });
+      this.on(EMPTIED, function() {
+        _this3.onReset();
+      });
+      this.on(VIDEO_RESIZE, function() {
+        _this3.onVideoResize();
+      });
     }
   }, {
-    key: "registerIcons",
-    value: function registerIcons() {
-      return {
-        screenBack: {
-          icon: BackSVG,
-          class: "xg-fullscreen-back"
+    key: "setConfig",
+    value: function setConfig(config) {
+      var _this4 = this;
+      var frags = null;
+      Object.keys(config).forEach(function(key) {
+        _this4.config[key] = config[key];
+        if (key === "fragments") {
+          frags = config[key];
         }
-      };
+      });
+      if (frags) {
+        this._initInner(frags, config);
+      }
     }
   }, {
-    key: "initIcons",
-    value: function initIcons() {
-      var icons = this.icons;
-      this.appendChild(this.root, icons.screenBack);
+    key: "initCustomStyle",
+    value: function initCustomStyle() {
+      var _ref = this.playerConfig || {}, commonStyle = _ref.commonStyle;
+      var sliderBtnStyle = commonStyle.sliderBtnStyle;
+      var progressBtn = this.progressBtn;
+      if (sliderBtnStyle) {
+        if (typeof sliderBtnStyle === "string") {
+          progressBtn.style.boxShadow = sliderBtnStyle;
+        } else if (_typeof$1(sliderBtnStyle) === "object") {
+          Object.keys(sliderBtnStyle).map(function(key) {
+            progressBtn.style[key] = sliderBtnStyle[key];
+          });
+        }
+      }
     }
   }, {
-    key: "show",
-    value: function show() {
-      util$3.addClass(this.root, "show");
+    key: "triggerCallbacks",
+    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, event);
+            } catch (error) {
+              console.error("[XGPLAYER][triggerCallbacks] ".concat(item, " error"), error);
+            }
+          }
+        });
+      }
     }
   }, {
-    key: "hide",
-    value: function hide() {
-      util$3.removeClass(this.root, "show");
+    key: "addCallBack",
+    value: function addCallBack(type, handle) {
+      if (handle && typeof handle === "function") {
+        this.__dragCallBacks.push({
+          type,
+          handler: handle
+        });
+      }
     }
   }, {
-    key: "render",
-    value: function render() {
-      return '<xg-icon class="xgplayer-back">\n    </xg-icon>';
-    }
-  }], [{
-    key: "pluginName",
-    get: function get() {
-      return "topbackicon";
+    key: "removeCallBack",
+    value: function removeCallBack(type, event) {
+      var __dragCallBacks = this.__dragCallBacks;
+      var _index = -1;
+      __dragCallBacks.map(function(item, index2) {
+        if (item && item.type === type && item.handler === event) {
+          _index = index2;
+        }
+      });
+      if (_index > -1) {
+        __dragCallBacks.splice(_index, 1);
+      }
     }
   }, {
-    key: "defaultConfig",
-    get: function get() {
-      return {
-        position: POSITIONS.ROOT_TOP,
-        index: 0
-      };
-    }
-  }]);
-  return TopBackIcon2;
-}(Plugin);
-function FullScreenSvg() {
-  return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="2 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M598 214h212v212h-84v-128h-128v-84zM726 726v-128h84v212h-212v-84h128zM214 426v-212h212v84h-128v128h-84zM298 598v128h128v84h-212v-212h84z"></path>\n</svg>\n', "image/svg+xml").firstChild;
-}
-function ExitFullScreenSvg() {
-  return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="2 -4 28 40">\n  <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z"></path>\n</svg>\n', "image/svg+xml").firstChild;
-}
-var Fullscreen = /* @__PURE__ */ function(_IconPlugin) {
-  _inherits(Fullscreen2, _IconPlugin);
-  var _super = _createSuper(Fullscreen2);
-  function Fullscreen2() {
-    var _this;
-    _classCallCheck$1(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$1(_assertThisInitialized(_this), "_onOrientationChange", function(e4) {
-      if (_this.player.fullscreen && _this.config.rotateFullscreen) {
-        if (window.orientation === 90 || window.orientation === -90) {
-          _this.player.setRotateDeg(0);
-        } else {
-          _this.player.setRotateDeg(90);
-        }
+    key: "unlock",
+    value: function unlock() {
+      var player = this.player, pos = this.pos;
+      pos.isEnter = false;
+      pos.isLocked = false;
+      if (player.isMini) {
+        return;
       }
-    });
-    return _this;
-  }
-  _createClass$1(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) {
+      this.unbind("mousemove", this.onMoveOnly);
+      if (pos.isDown) {
+        this.unbind("mouseleave", this.onMouseLeave);
         return;
       }
-      if (config.target) {
-        this.playerConfig.fullscreenTarget = this.config.target;
+      this.blur();
+    }
+  }, {
+    key: "bindDomEvents",
+    value: function bindDomEvents() {
+      var config = this.player.config;
+      this._mouseDownHandlerHook = this.hook("dragstart", this._mouseDownHandler);
+      this._mouseUpHandlerHook = this.hook("dragend", this._mouseUpHandler);
+      this._mouseMoveHandlerHook = this.hook("drag", this._mouseMoveHandler);
+      if (this.domEventType === "touch" || this.domEventType === "compatible") {
+        this.root.addEventListener("touchstart", this.onMouseDown);
+      }
+      if (this.domEventType === "mouse" || this.domEventType === "compatible") {
+        this.bind("mousedown", this.onMouseDown);
+        config.isMobileSimulateMode !== "mobile" && this.bind("mouseenter", this.onMouseEnter);
+        this.bind("mouseover", this.onMouseOver);
+        this.bind("mouseout", this.onMouseOut);
+        this.player.root.addEventListener("click", this.onBodyClick, true);
       }
-      var fullEl = util$3.getFullScreenEl();
-      if (playerConfig.fullscreenTarget === fullEl) {
-        this.player.getFullscreen().catch(function(e4) {
-        });
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.player.controls.pauseAutoHide();
+      util$3.addClass(this.root, "active");
+    }
+  }, {
+    key: "blur",
+    value: function blur() {
+      if (this._disableBlur) {
+        return;
       }
-      this.initIcons();
-      this.handleFullscreen = this.hook("fullscreenChange", this.toggleFullScreen, {
-        pre: function pre(e4) {
-          var fullscreen = _this2.player.fullscreen;
-          _this2.emitUserAction(e4, "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(e4) {
-                _this2.handleFullscreen(e4);
-              }
-            }
-          }
-        });
+      this.player.controls.recoverAutoHide();
+      util$3.removeClass(this.root, "active");
+    }
+  }, {
+    key: "disableBlur",
+    value: function disableBlur() {
+      this._disableBlur = true;
+    }
+  }, {
+    key: "enableBlur",
+    value: function enableBlur() {
+      this._disableBlur = false;
+    }
+  }, {
+    key: "updateWidth",
+    value: function updateWidth(currentTime, seekTime, percent, type) {
+      var config = this.config, player = this.player;
+      if (config.isCloseClickSeek && type === 0) {
+        return;
       }
-      if (sniffer.device === "mobile") {
-        window.addEventListener("orientationchange", this._onOrientationChange);
+      var realTime = seekTime = seekTime >= player.duration ? player.duration - config.endedDiff : Number(seekTime).toFixed(1);
+      this.updatePercent(percent);
+      this.updateTime(currentTime);
+      if (type === 1 && (!config.isDraggingSeek || player.config.mediaType === "audio")) {
+        return;
       }
+      this._state.now = realTime;
+      this._state.direc = realTime > player.currentTime ? 0 : 1;
+      player.seek(realTime);
     }
   }, {
-    key: "registerIcons",
-    value: function registerIcons() {
+    key: "computeTime",
+    value: function computeTime(e4, x2) {
+      var player = this.player;
+      var _this$root$getBoundin = this.root.getBoundingClientRect(), width = _this$root$getBoundin.width, height = _this$root$getBoundin.height, top = _this$root$getBoundin.top, left = _this$root$getBoundin.left;
+      var rWidth, rLeft;
+      var clientX = x2;
+      if (player.rotateDeg === 90) {
+        rWidth = height;
+        rLeft = top;
+      } else {
+        rWidth = width;
+        rLeft = left;
+      }
+      var offset = clientX - rLeft;
+      offset = offset > rWidth ? rWidth : offset < 0 ? 0 : offset;
+      var percent = offset / rWidth;
+      percent = percent < 0 ? 0 : percent > 1 ? 1 : percent;
+      if (Number.isNaN(percent)) {
+        percent = this.player.currentTime / this.offsetDuration;
+      }
+      var currentTime = parseInt(percent * this.offsetDuration * 1e3, 10) / 1e3;
+      var seekTime = util$3.getCurrentTimeByOffset(currentTime, player.timeSegments);
       return {
-        fullscreen: {
-          icon: FullScreenSvg,
-          class: "xg-get-fullscreen"
-        },
-        exitFullscreen: {
-          icon: ExitFullScreenSvg,
-          class: "xg-exit-fullscreen"
-        }
+        percent,
+        currentTime,
+        seekTime,
+        offset,
+        width: rWidth,
+        left: rLeft,
+        e: e4
       };
     }
   }, {
-    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: "updateTime",
+    value: function updateTime(time) {
+      var player = this.player, duration = this.duration;
+      if (time > duration) {
+        time = duration;
+      } else if (time < 0) {
+        time = 0;
+      }
+      var timeIcon = player.plugins.time;
+      if (timeIcon) {
+        timeIcon.updateTime(time);
       }
     }
   }, {
-    key: "initIcons",
-    value: function initIcons() {
-      var icons = this.icons;
-      this.appendChild(".xgplayer-icon", icons.fullscreen);
-      this.appendChild(".xgplayer-icon", icons.exitFullscreen);
+    key: "resetSeekState",
+    value: function resetSeekState() {
+      this.isProgressMoving = false;
+      var timeIcon = this.player.plugins.time;
+      timeIcon && timeIcon.resetActive();
     }
   }, {
-    key: "toggleFullScreen",
-    value: function toggleFullScreen(e4) {
-      if (e4 instanceof Event) {
-        e4.preventDefault();
-        e4.stopPropagation();
+    key: "updatePercent",
+    value: function updatePercent(percent, notSeek) {
+      this.isProgressMoving = true;
+      if (this.config.disable) {
+        return;
       }
-      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();
-          if (config.useScreenOrientation) {
-            this.unlockScreen();
-          }
+      percent = percent > 1 ? 1 : percent < 0 ? 0 : percent;
+      this.progressBtn.style.left = "".concat(percent * 100, "%");
+      this.innerList.update({
+        played: percent * this.offsetDuration
+      }, this.offsetDuration);
+      var miniprogress = this.player.plugins.miniprogress;
+      miniprogress && miniprogress.update({
+        played: percent * this.offsetDuration
+      }, this.offsetDuration);
+    }
+  }, {
+    key: "onTimeupdate",
+    value: function onTimeupdate(isEnded) {
+      var player = this.player, _state = this._state, offsetDuration = this.offsetDuration;
+      if (player.isSeeking && player.media.seeking || this.isProgressMoving || !player.hasStart) {
+        return;
+      }
+      if (_state.now > -1) {
+        var abs = parseInt(_state.now * 1e3, 10) - parseInt(player.currentTime * 1e3, 10);
+        if (_state.direc === 0 && abs > 300 || _state.direc === 1 && abs > -300) {
+          _state.now = -1;
+          return;
         } else {
-          player.getFullscreen().catch(function(e22) {
-          });
-          if (config.useScreenOrientation && player.aspectRatio > 1) {
-            this.lockScreen(config.lockOrientationType);
-          }
+          _state.now = -1;
         }
       }
+      var time = this.currentTime;
+      time = util$3.adjustTimeByDuration(time, offsetDuration, isEnded);
+      this.innerList.update({
+        played: time
+      }, offsetDuration);
+      this.progressBtn.style.left = "".concat(time / offsetDuration * 100, "%");
     }
   }, {
-    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: "onCacheUpdate",
+    value: function onCacheUpdate(isEnded) {
+      var player = this.player, duration = this.duration;
+      if (!player) {
+        return;
+      }
+      var _end = player.bufferedPoint.end;
+      _end = util$3.adjustTimeByDuration(_end, duration, isEnded);
+      this.innerList.update({
+        cached: _end
+      }, duration);
+    }
+  }, {
+    key: "onReset",
+    value: function onReset() {
+      this.innerList.update({
+        played: 0,
+        cached: 0
+      }, 0);
+      this.progressBtn.style.left = "0%";
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var player = this.player;
+      this.thumbnailPlugin = null;
+      this.innerList.destroy();
+      this.innerList = null;
+      var domEventType = this.domEventType;
+      if (domEventType === "touch" || domEventType === "compatible") {
+        this.root.removeEventListener("touchstart", this.onMouseDown);
+        this.root.removeEventListener("touchmove", this.onMouseMove);
+        this.root.removeEventListener("touchend", this.onMouseUp);
+        this.root.removeEventListener("touchcancel", this.onMouseUp);
+      }
+      if (domEventType === "mouse" || domEventType === "compatible") {
+        this.unbind("mousedown", this.onMouseDown);
+        this.unbind("mouseenter", this.onMouseEnter);
+        this.unbind("mousemove", this.onMoveOnly);
+        this.unbind("mouseleave", this.onMouseLeave);
+        document.removeEventListener("mousemove", this.onMouseMove, false);
+        document.removeEventListener("mouseup", this.onMouseUp, false);
+        player.root.removeEventListener("click", this.onBodyClick, true);
       }
     }
   }, {
     key: "render",
     value: function render() {
-      if (this.config.disable) {
+      if (this.config.disable || this.playerConfig.isLive) {
         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: "lockScreen",
-    value: function lockScreen(orientation) {
-      try {
-        screen.orientation.lock(orientation).catch(function(e4) {
-        });
-      } catch (e4) {
-      }
-    }
-  }, {
-    key: "unlockScreen",
-    value: function unlockScreen() {
-      try {
-        screen.orientation.unlock().catch(function(e4) {
-        });
-      } catch (e4) {
-      }
+      var controlsMode = this.player.controls ? this.player.controls.config.mode : "";
+      var className = controlsMode === "bottom" ? "xgplayer-progress-bottom" : "";
+      return '\n    <xg-progress class="xgplayer-progress '.concat(className, '">\n      <xg-outer class="xgplayer-progress-outer">\n        <xg-progress-btn class="xgplayer-progress-btn"></xg-progress-btn>\n      </xg-outer>\n    </xg-progress>\n    ');
     }
   }], [{
     key: "pluginName",
     get: function get() {
-      return "fullscreen";
+      return "progress";
     }
   }, {
     key: "defaultConfig",
     get: function get() {
       return {
-        position: POSITIONS.CONTROLS_RIGHT,
+        position: POSITIONS.CONTROLS_CENTER,
         index: 0,
-        useCssFullscreen: false,
-        rotateFullscreen: false,
-        useScreenOrientation: false,
-        lockOrientationType: "landscape",
-        switchCallback: null,
-        target: null,
         disable: false,
-        needBackIcon: false
+        isDraggingSeek: true,
+        closeMoveSeek: false,
+        isPauseMoving: false,
+        isCloseClickSeek: false,
+        fragments: [{
+          percent: 1
+        }],
+        fragFocusClass: FRAGMENT_FOCUS_CLASS.POINT,
+        fragClass: "",
+        fragAutoFocus: false,
+        miniMoveStep: 5,
+        miniStartStep: 2,
+        onMoveStart: function onMoveStart() {
+        },
+        onMoveEnd: function onMoveEnd() {
+        },
+        endedDiff: 0.2
       };
     }
+  }, {
+    key: "FRAGMENT_FOCUS_CLASS",
+    get: function get() {
+      return FRAGMENT_FOCUS_CLASS;
+    }
   }]);
-  return Fullscreen2;
-}(Icon);
+  return Progress2;
+}(Plugin);
 var Time = /* @__PURE__ */ function(_Plugin) {
   _inherits(Time2, _Plugin);
   var _super = _createSuper(Time2);
@@ -4537,6 +4684,7 @@ var Time = /* @__PURE__ */ function(_Plugin) {
       this.centerDurDom = util$3.createDom("xg-icon", "00:00", {}, "xgplayer-time xg-time-right");
       center.children.length > 0 ? center.insertBefore(this.centerCurDom, center.children[0]) : center.appendChild(this.centerCurDom);
       center.appendChild(this.centerDurDom);
+      this.extraEls = [this.centerCurDom, this.centerDurDom];
     }
   }, {
     key: "afterPlayerInit",
@@ -4958,141 +5106,6 @@ var Volume = /* @__PURE__ */ function(_Plugin) {
   }]);
   return Volume2;
 }(Plugin);
-function CssFullSceenSvg() {
-  return new DOMParser().parseFromString(`<svg xmlns="http://www.w3.org/2000/svg" width="31" height="40" viewBox="0 -5 31 40">
-  <path fill="#fff" transform="scale(1.3, 1.3)" class='path_full' d="M9,10v1a.9.9,0,0,1-1,1,.9.9,0,0,1-1-1V9A.9.9,0,0,1,8,8h2a.9.9,0,0,1,1,1,.9.9,0,0,1-1,1Zm6,4V13a1,1,0,0,1,2,0v2a.9.9,0,0,1-1,1H14a1,1,0,0,1,0-2Zm3-7H6V17H18Zm2,0V17a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V7A2,2,0,0,1,6,5H18A2,2,0,0,1,20,7Z"></path>
-</svg>
-`, "image/svg+xml").firstChild;
-}
-function ExitCssFullSceenSvg() {
-  return new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg" width="31" height="40" viewBox="0 -5 31 40">\n  <path fill="#fff" transform="scale(1.3, 1.3)" d="M9,10V9a.9.9,0,0,1,1-1,.9.9,0,0,1,1,1v2a.9.9,0,0,1-1,1H8a.9.9,0,0,1-1-1,.9.9,0,0,1,1-1Zm6,4v1a1,1,0,0,1-2,0V13a.9.9,0,0,1,1-1h2a1,1,0,0,1,0,2Zm3-7H6V17H18Zm2,0V17a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V7A2,2,0,0,1,6,5H18A2,2,0,0,1,20,7Z"></path>\n</svg>\n', "image/svg+xml").firstChild;
-}
-var CssFullScreen = /* @__PURE__ */ function(_IconPlugin) {
-  _inherits(CssFullScreen2, _IconPlugin);
-  var _super = _createSuper(CssFullScreen2);
-  function CssFullScreen2() {
-    _classCallCheck$1(this, CssFullScreen2);
-    return _super.apply(this, arguments);
-  }
-  _createClass$1(CssFullScreen2, [{
-    key: "beforeCreate",
-    value: function beforeCreate(args) {
-      if (typeof args.player.config.cssFullscreen === "boolean") {
-        args.config.disable = !args.player.config.cssFullscreen;
-      }
-    }
-  }, {
-    key: "afterCreate",
-    value: function afterCreate() {
-      var _this = this;
-      _get(_getPrototypeOf(CssFullScreen2.prototype), "afterCreate", this).call(this);
-      if (this.config.disable) {
-        return;
-      }
-      if (this.config.target) {
-        this.playerConfig.fullscreenTarget = this.config.target;
-      }
-      this.initIcons();
-      this.on(CSS_FULLSCREEN_CHANGE, function(isCssfullScreen) {
-        _this.animate(isCssfullScreen);
-      });
-      this.btnClick = this.btnClick.bind(this);
-      this.handleCssFullscreen = this.hook("cssFullscreen_change", this.btnClick, {
-        pre: function pre(e4) {
-          e4.preventDefault();
-          e4.stopPropagation();
-        }
-      });
-      this.bind(["click", "touchend"], this.handleCssFullscreen);
-    }
-  }, {
-    key: "initIcons",
-    value: function initIcons() {
-      var icons = this.icons;
-      var contentIcon = this.find(".xgplayer-icon");
-      contentIcon.appendChild(icons.cssFullscreen);
-      contentIcon.appendChild(icons.exitCssFullscreen);
-    }
-  }, {
-    key: "btnClick",
-    value: function btnClick(e4) {
-      e4.preventDefault();
-      e4.stopPropagation();
-      var isCssfullScreen = this.player.isCssfullScreen;
-      this.emitUserAction(e4, "switch_cssfullscreen", {
-        cssfullscreen: isCssfullScreen
-      });
-      if (!isCssfullScreen) {
-        this.player.getCssFullscreen();
-      } else {
-        this.player.exitCssFullscreen();
-      }
-    }
-  }, {
-    key: "animate",
-    value: function animate(isFullScreen) {
-      if (!this.root) {
-        return;
-      }
-      isFullScreen ? this.setAttr("data-state", "full") : this.setAttr("data-state", "normal");
-      this.switchTips(isFullScreen);
-    }
-  }, {
-    key: "switchTips",
-    value: function switchTips(isFullScreen) {
-      var i18nKeys = this.i18nKeys;
-      var tipDom = this.find(".xg-tips");
-      tipDom && this.changeLangTextKey(tipDom, isFullScreen ? i18nKeys.EXITCSSFULLSCREEN_TIPS : i18nKeys.CSSFULLSCREEN_TIPS);
-    }
-  }, {
-    key: "registerIcons",
-    value: function registerIcons() {
-      return {
-        cssFullscreen: {
-          icon: CssFullSceenSvg,
-          class: "xg-get-cssfull"
-        },
-        exitCssFullscreen: {
-          icon: ExitCssFullSceenSvg,
-          class: "xg-exit-cssfull"
-        }
-      };
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      _get(_getPrototypeOf(CssFullScreen2.prototype), "destroy", this).call(this);
-      this.unbind(["click", "touchend"], this.btnClick);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.config.disable) {
-        return;
-      }
-      return `<xg-icon class='xgplayer-cssfullscreen'>
-    <div class="xgplayer-icon">
-    </div>
-    `.concat(xgIconTips(this, "CSSFULLSCREEN_TIPS", this.playerConfig.isHideTips), "\n    </xg-icon>");
-    }
-  }], [{
-    key: "pluginName",
-    get: function get() {
-      return "cssFullscreen";
-    }
-  }, {
-    key: "defaultConfig",
-    get: function get() {
-      return {
-        position: POSITIONS.CONTROLS_RIGHT,
-        index: 1,
-        disable: false,
-        target: null
-      };
-    }
-  }]);
-  return CssFullScreen2;
-}(Icon);
 function _typeof(obj) {
   "@babel/helpers - typeof";
   return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj2) {
@@ -5462,6 +5475,9 @@ var BaseAdManager = /* @__PURE__ */ function(_EventEmitter) {
   }, {
     key: "shouldBlockVideoContent",
     get: function get() {
+      if (sniffer.os.isTizen || sniffer.os.isWebOS) {
+        return false;
+      }
       return this.isLinearAdRunning || this._shouldBlockVideoContent;
     },
     set: function set(flag) {
@@ -5624,12 +5640,6 @@ var ImaAdManager = /* @__PURE__ */ function(_BaseAdManager) {
           break;
         }
         case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED: {
-          if (_this._resumeCallback) {
-            var _this$_resumeCallback = _this._resumeCallback(), canResume = _this$_resumeCallback.canResume;
-            if (!canResume) {
-              break;
-            }
-          }
           _this._resumeContent();
           _this.emit(IMA_CONTENT_RESUME_REQUESTED, {
             ad
@@ -5655,8 +5665,6 @@ var ImaAdManager = /* @__PURE__ */ function(_BaseAdManager) {
             _this.plugin.emit(AD_PLAY, {
               ad
             });
-            intervalTimer = setInterval(function() {
-            }, 300);
           }
           break;
         }
@@ -5733,7 +5741,6 @@ var ImaAdManager = /* @__PURE__ */ function(_BaseAdManager) {
     _this.displayContainer = null;
     _this.adsLoader = null;
     _this.adsManager = null;
-    _this._resumeCallback = null;
     return _this;
   }
   _createClass$2(ImaAdManager2, [{
@@ -5782,15 +5789,9 @@ var ImaAdManager = /* @__PURE__ */ function(_BaseAdManager) {
     value: function destroy() {
       _get$1(_getPrototypeOf$1(ImaAdManager2.prototype), "destroy", this).call(this);
       this.reset();
-      this.displayContainer.destroy();
       this._removeMediaEvents();
       this._destroyLoader();
     }
-  }, {
-    key: "resumeCallback",
-    set: function set(resumeCallbackFunc) {
-      this._resumeCallback = resumeCallbackFunc;
-    }
   }, {
     key: "_initConfig",
     value: function _initConfig() {
@@ -6023,27 +6024,28 @@ var ImaAdManager = /* @__PURE__ */ function(_BaseAdManager) {
     key: "_checkAutoplaySupport",
     value: function() {
       var _checkAutoplaySupport2 = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime().mark(function _callee3() {
-        var autoplay, timeout, _yield$Promise$all, _yield$Promise$all2, autoplayAllowed, autoplayMutedAllowed;
+        var autoplay, timeout, isKnownAutoplayPlatform, _yield$Promise$all, _yield$Promise$all2, autoplayAllowed, autoplayMutedAllowed;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1)
             switch (_context3.prev = _context3.next) {
               case 0:
                 autoplay = this.player.config.autoplay;
                 timeout = 800;
-                _context3.next = 4;
-                return Promise.all([autoplay ? index.video({
+                isKnownAutoplayPlatform = sniffer.os.isTizen || sniffer.os.isWebOS;
+                _context3.next = 5;
+                return Promise.all([autoplay ? isKnownAutoplayPlatform || index.video({
                   timeout
                 }).then(function(_ref3) {
                   var result = _ref3.result;
                   return result;
-                }) : Promise.resolve(false), autoplay && this.player.config.autoplayMuted ? index.video({
+                }) : Promise.resolve(false), autoplay && this.player.config.autoplayMuted ? isKnownAutoplayPlatform || index.video({
                   timeout,
                   muted: true
                 }).then(function(_ref4) {
                   var result = _ref4.result;
                   return result;
                 }) : Promise.resolve(false)]);
-              case 4:
+              case 5:
                 _yield$Promise$all = _context3.sent;
                 _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
                 autoplayAllowed = _yield$Promise$all2[0];
@@ -6051,7 +6053,7 @@ var ImaAdManager = /* @__PURE__ */ function(_BaseAdManager) {
                 this.autoplayAllowed = autoplayAllowed || autoplayMutedAllowed;
                 this.autoplayRequiresMuted = !autoplayAllowed && autoplayMutedAllowed;
                 logger$1.log("checkAutoplaySupport", this.autoplayAllowed, this.autoplayRequiresMuted);
-              case 11:
+              case 12:
               case "end":
                 return _context3.stop();
             }
@@ -6242,9 +6244,15 @@ var AdUIManager = /* @__PURE__ */ function() {
         if (targetPlugin) {
           var newDecoratorPlugin = null;
           if (decoratorClass && !player.getPlugin(decoratorClass.pluginName)) {
+            var _newDecoratorPlugin$e;
             player.registerPlugin(decoratorClass);
             newDecoratorPlugin = player.getPlugin(decoratorClass.pluginName);
             fragment.appendChild(newDecoratorPlugin.root);
+            if ((_newDecoratorPlugin$e = newDecoratorPlugin.extraEls) !== null && _newDecoratorPlugin$e !== void 0 && _newDecoratorPlugin$e.length) {
+              newDecoratorPlugin.extraEls.forEach(function(el) {
+                fragment.appendChild(el);
+              });
+            }
           }
           adUIPlugins.push([targetPlugin, newDecoratorPlugin]);
         }
@@ -6312,11 +6320,23 @@ var AdUIManager = /* @__PURE__ */ function() {
         if (!overrideAdPlugin) {
           return;
         }
-        var adRoot = overrideAdPlugin.root;
-        var normalRoot = normalPlugin.root;
+        var adRoot = overrideAdPlugin.root, adExtraEls = overrideAdPlugin.extraEls;
+        var normalRoot = normalPlugin.root, normalExtraEls = normalPlugin.extraEls;
         if (fragmentContainer.contains(adRoot)) {
           fragmentContainer.removeChild(adRoot);
         }
+        if (Array.isArray(adExtraEls) && adExtraEls.length) {
+          adExtraEls.forEach(function(adEl, index2) {
+            if (fragmentContainer.contains(adEl)) {
+              fragmentContainer.removeChild(adEl);
+            }
+            var normalEl = normalExtraEls === null || normalExtraEls === void 0 ? void 0 : normalExtraEls[index2];
+            if (normalEl !== null && normalEl !== void 0 && normalEl.parentNode) {
+              normalEl.parentNode.insertBefore(adEl, normalEl);
+              fragmentContainer.appendChild(normalEl);
+            }
+          });
+        }
         normalRoot.parentNode.insertBefore(adRoot, normalRoot);
         fragmentContainer.appendChild(normalRoot);
       });
@@ -6351,8 +6371,8 @@ var AdUIManager = /* @__PURE__ */ function() {
         if (!overrideAdPlugin) {
           return;
         }
-        var adRoot = overrideAdPlugin.root;
-        var normalRoot = normalPlugin.root;
+        var adRoot = overrideAdPlugin.root, adExtraEl = overrideAdPlugin.extraEls;
+        var normalRoot = normalPlugin.root, normalExtraEl = normalPlugin.extraEls;
         if (fragmentContainer.contains(normalRoot)) {
           fragmentContainer.removeChild(normalRoot);
         }
@@ -6360,6 +6380,18 @@ var AdUIManager = /* @__PURE__ */ function() {
           adRoot.parentNode.insertBefore(normalRoot, adRoot);
           fragmentContainer.appendChild(adRoot);
         }
+        if (Array.isArray(normalExtraEl) && normalExtraEl !== null && normalExtraEl !== void 0 && normalExtraEl.length) {
+          normalExtraEl.forEach(function(normalEl, index2) {
+            if (fragmentContainer.contains(normalEl)) {
+              fragmentContainer.removeChild(normalEl);
+            }
+            var adEl = adExtraEl === null || adExtraEl === void 0 ? void 0 : adExtraEl[index2];
+            if (adEl && adEl.parentNode) {
+              adEl.parentNode.insertBefore(normalEl, adEl);
+              fragmentContainer.appendChild(adEl);
+            }
+          });
+        }
       });
       var otherPlugins = this._getNonAdPlugin();
       otherPlugins.filter(function(plugin2) {
@@ -6467,7 +6499,7 @@ var AdsPlugin$1 = /* @__PURE__ */ function(_Plugin) {
   _createClass$2(AdsPlugin2, [{
     key: "version",
     get: function get() {
-      return "3.0.21-rc.4";
+      return "3.0.23-rc.1";
     }
   }, {
     key: "paused",
@@ -6529,55 +6561,37 @@ var AdsPlugin$1 = /* @__PURE__ */ function(_Plugin) {
     }
   }, {
     key: "_initImaAd",
-    value: function() {
-      var _initImaAd2 = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime().mark(function _callee() {
-        var _this = this;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1)
-            switch (_context.prev = _context.next) {
-              case 0:
-                this.csManager = new ImaAdManager({
-                  plugin: this,
-                  config: this.config.ima,
-                  displayContainer: this.root
-                });
-                this.csManager.once(IMA_SDK_LOAD_START, function() {
-                  _this.uiManager.showAdContainer();
-                });
-                this.csManager.on(IMA_SDK_LOAD_ERROR, function() {
-                  _this.uiManager.hideAdContainer();
-                });
-                this.csManager.once(IMA_AD_LOADED, function(_ref) {
-                  var isPreroll = _ref.isPreroll;
-                  if (!isPreroll) {
-                    _this.uiManager.hideAdContainer();
-                  }
-                });
-                this.csManager.once(IMA_READY_TO_PLAY, function() {
-                  var _this$initPromise;
-                  (_this$initPromise = _this.initPromise) === null || _this$initPromise === void 0 ? void 0 : _this$initPromise.resolve();
-                });
-                this.csManager.on(IMA_CONTENT_PAUSE_REQUESTED, function() {
-                  _this.uiManager.showAdUI();
-                });
-                this.csManager.on(IMA_CONTENT_RESUME_REQUESTED, function() {
-                  _this.uiManager.hideAdUI();
-                });
-                _context.next = 9;
-                return this.csManager.init();
-              case 9:
-                return _context.abrupt("return", this.csManager);
-              case 10:
-              case "end":
-                return _context.stop();
-            }
-        }, _callee, this);
-      }));
-      function _initImaAd() {
-        return _initImaAd2.apply(this, arguments);
-      }
-      return _initImaAd;
-    }()
+    value: function _initImaAd() {
+      var _this = this;
+      this.csManager = new ImaAdManager({
+        plugin: this,
+        config: this.config.ima,
+        displayContainer: this.root
+      });
+      this.csManager.once(IMA_SDK_LOAD_START, function() {
+        _this.uiManager.showAdContainer();
+      });
+      this.csManager.on(IMA_SDK_LOAD_ERROR, function() {
+        _this.uiManager.hideAdContainer();
+      });
+      this.csManager.once(IMA_AD_LOADED, function(_ref) {
+        var isPreroll = _ref.isPreroll;
+        if (!isPreroll) {
+          _this.uiManager.hideAdContainer();
+        }
+      });
+      this.csManager.once(IMA_READY_TO_PLAY, function() {
+        var _this$initPromise;
+        (_this$initPromise = _this.initPromise) === null || _this$initPromise === void 0 ? void 0 : _this$initPromise.resolve();
+      });
+      this.csManager.on(IMA_CONTENT_PAUSE_REQUESTED, function() {
+        _this.uiManager.showAdUI();
+      });
+      this.csManager.on(IMA_CONTENT_RESUME_REQUESTED, function() {
+        _this.uiManager.hideAdUI();
+      });
+      this.csManager.init();
+    }
   }, {
     key: "requestAds",
     value: function requestAds() {