@byteplus/veplayer-plugin 2.8.0-rc.0 → 2.8.0-rc.10

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

@@ -1811,6 +1811,8 @@ var __publicField = (obj, key, value) => {
       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;
@@ -1826,7 +1828,9 @@ var __publicField = (obj, key, value) => {
         isPc,
         isSymbian,
         isWindowsPhone,
-        isFireFox
+        isFireFox,
+        isTizen,
+        isWebOS
       };
     },
     get osVersion() {
@@ -2552,6 +2556,7 @@ var __publicField = (obj, key, value) => {
         this.icons = {};
         this.root = null;
         this.parent = null;
+        this.extraEls = [];
         var _orgicons = this.registerIcons() || {};
         registerIconsObj(_orgicons, this);
         this.langText = {};
@@ -2894,6 +2899,7 @@ var __publicField = (obj, key, value) => {
         ["root", "parent"].map(function(item) {
           _this7[item] = null;
         });
+        this.extraEls = [];
       }
     }], [{
       key: "insert",
@@ -3010,12 +3016,6 @@ var __publicField = (obj, key, value) => {
     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>");
@@ -3023,1400 +3023,1547 @@ var __publicField = (obj, key, value) => {
       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(e2) {
+        _this.emit("icon_mouseenter", {
+          pluginName: _this.pluginName
+        });
+      });
+      _defineProperty$1(_assertThisInitialized(_this), "_onMouseLeave", function(e2) {
+        _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(e2) {
+            e2.preventDefault();
+            e2.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(e2) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        var isCssfullScreen = this.player.isCssfullScreen;
+        this.emitUserAction(e2, "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(e2) {
+          e2.preventDefault();
+          e2.stopPropagation();
+          _this.config.onClick(e2);
+        };
+        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(e2, data) {
-        var _assertThisInitialize = _assertThisInitialized(_this), pos = _assertThisInitialize.pos, config = _assertThisInitialize.config, player = _assertThisInitialize.player;
-        var ret = data;
-        if (e2) {
-          util$3.event(e2);
-          var _ePos = util$3.getEventPos(e2, 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(e2) {
+        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(e2, x2);
-        }
-        _this.triggerCallbacks("dragmove", ret, e2);
-        _this._updateInnerFocus(ret);
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "onBodyClick", function(e2) {
-        if (!_this.pos.isLocked) {
-          return;
         }
-        _this.pos.isLocked = false;
-        e2.preventDefault();
-        e2.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(e2, 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(e2, 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, e2);
-          _this.emitUserAction("drag", "dragstart", data);
-        }
-        _this.updateWidth(data.currentTime, data.seekTime, data.percent, 1);
-        _this.triggerCallbacks("dragmove", data, e2);
-        _this._updateInnerFocus(data);
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "onMouseDown", function(e2) {
-        var _assertThisInitialize4 = _assertThisInitialized(_this), _state = _assertThisInitialize4._state, player = _assertThisInitialize4.player, pos = _assertThisInitialize4.pos, config = _assertThisInitialize4.config, playerConfig = _assertThisInitialize4.playerConfig;
-        var _ePos = util$3.getEventPos(e2, 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;
         }
-        e2.stopPropagation();
-        _this.focus();
-        util$3.checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
-        util$3.checkIsFunction(config.onMoveStart) && config.onMoveStart();
-        util$3.event(e2);
-        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(e2, x2);
-        ret.prePlayTime = _state.prePlayTime;
-        _this._mouseDownHandlerHook(e2, ret);
-        var eventType = e2.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(e2) {
-        var _assertThisInitialize5 = _assertThisInitialized(_this), player = _assertThisInitialize5.player, config = _assertThisInitialize5.config, pos = _assertThisInitialize5.pos, playerConfig = _assertThisInitialize5.playerConfig, _state = _assertThisInitialize5._state;
-        e2.stopPropagation();
-        e2.preventDefault();
-        util$3.checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
-        util$3.checkIsFunction(config.onMoveEnd) && config.onMoveEnd();
-        util$3.event(e2);
-        util$3.removeClass(_this.progressBtn, "active");
-        var ret = _this.computeTime(e2, pos.x);
-        ret.prePlayTime = _state.prePlayTime;
-        if (pos.moving) {
-          _this.triggerCallbacks("dragend", ret, e2);
-          _this.emitUserAction("drag", "dragend", ret);
-        } else {
-          _this.triggerCallbacks("click", ret, e2);
-          _this.emitUserAction("click", "click", ret);
+        var fullEl = util$3.getFullScreenEl();
+        if (playerConfig.fullscreenTarget === fullEl) {
+          this.player.getFullscreen().catch(function(e2) {
+          });
         }
-        _this._mouseUpHandlerHook(e2, ret);
-        pos.moving = false;
-        pos.isDown = false;
-        pos.x = 0;
-        pos.y = 0;
-        pos.isLocked = true;
-        _state.prePlayTime = 0;
-        _state.time = 0;
-        var eventType = e2.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(e2);
-          } else {
-            playerConfig.isMobileSimulateMode !== "mobile" && _this.bind("mousemove", _this.onMoveOnly);
+        this.initIcons();
+        this.handleFullscreen = this.hook("fullscreenChange", this.toggleFullScreen, {
+          pre: function pre(e2) {
+            var fullscreen = _this2.player.fullscreen;
+            _this2.emitUserAction(e2, "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(e2) {
+                  _this2.handleFullscreen(e2);
+                }
+              }
+            }
+          });
         }
-        util$3.setTimeout(_assertThisInitialized(_this), function() {
-          _this.resetSeekState();
-        }, 1);
-        player.focus();
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "onMouseMove", function(e2) {
-        var _assertThisInitialize6 = _assertThisInitialized(_this), _state = _assertThisInitialize6._state, pos = _assertThisInitialize6.pos, player = _assertThisInitialize6.player, config = _assertThisInitialize6.config;
-        if (util$3.checkTouchSupport()) {
-          e2.preventDefault();
-        }
-        util$3.event(e2);
-        var _ePos = util$3.getEventPos(e2, 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(e2, x2);
-        ret.prePlayTime = _state.prePlayTime;
-        _this._mouseMoveHandlerHook(e2, ret);
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "onMouseOut", function(e2) {
-        _this.triggerCallbacks("mouseout", null, e2);
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "onMouseOver", function(e2) {
-        _this.triggerCallbacks("mouseover", null, e2);
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "onMouseEnter", function(e2) {
-        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(e2);
-        var _ePos = util$3.getEventPos(e2, player.zoom);
-        var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
-        var ret = _this.computeTime(e2, x2);
-        _this.triggerCallbacks("mouseenter", ret, e2);
-        _this.focus();
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "onMouseLeave", function(e2) {
-        _this.triggerCallbacks("mouseleave", null, e2);
-        _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(e2) {
+        if (e2 instanceof Event) {
+          e2.preventDefault();
+          e2.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(e2) {
           });
-        } else {
-          this.innerList.reset(_c);
+        } catch (e2) {
         }
       }
     }, {
-      key: "_updateInnerFocus",
-      value: function _updateInnerFocus(data) {
-        this.innerList && this.innerList.updateFocus(data);
+      key: "unlockScreen",
+      value: function unlockScreen() {
+        try {
+          screen.orientation.unlock().catch(function(e2) {
+          });
+        } catch (e2) {
+        }
+      }
+    }], [{
+      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(e2) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player;
+        _this.emitUserAction(e2, "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(e2, 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: e2
-        };
       }
     }, {
-      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(e2, data) {
+        var _assertThisInitialize = _assertThisInitialized(_this), pos = _assertThisInitialize.pos, config = _assertThisInitialize.config, player = _assertThisInitialize.player;
+        var ret = data;
+        if (e2) {
+          util$3.event(e2);
+          var _ePos = util$3.getEventPos(e2, 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(e2, x2);
+        }
+        _this.triggerCallbacks("dragmove", ret, e2);
+        _this._updateInnerFocus(ret);
+      });
+      _defineProperty$1(_assertThisInitialized(_this), "onBodyClick", function(e2) {
+        if (!_this.pos.isLocked) {
+          return;
+        }
+        _this.pos.isLocked = false;
+        e2.preventDefault();
+        e2.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(e2, 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(e2, 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, e2);
+          _this.emitUserAction("drag", "dragstart", data);
+        }
+        _this.updateWidth(data.currentTime, data.seekTime, data.percent, 1);
+        _this.triggerCallbacks("dragmove", data, e2);
+        _this._updateInnerFocus(data);
+      });
+      _defineProperty$1(_assertThisInitialized(_this), "onMouseDown", function(e2) {
+        var _assertThisInitialize4 = _assertThisInitialized(_this), _state = _assertThisInitialize4._state, player = _assertThisInitialize4.player, pos = _assertThisInitialize4.pos, config = _assertThisInitialize4.config, playerConfig = _assertThisInitialize4.playerConfig;
+        var _ePos = util$3.getEventPos(e2, 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;
+        }
+        e2.stopPropagation();
+        _this.focus();
+        util$3.checkIsFunction(playerConfig.disableSwipeHandler) && playerConfig.disableSwipeHandler();
+        util$3.checkIsFunction(config.onMoveStart) && config.onMoveStart();
+        util$3.event(e2);
+        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(e2, x2);
+        ret.prePlayTime = _state.prePlayTime;
+        _this._mouseDownHandlerHook(e2, ret);
+        var eventType = e2.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(e2) {
+        var _assertThisInitialize5 = _assertThisInitialized(_this), player = _assertThisInitialize5.player, config = _assertThisInitialize5.config, pos = _assertThisInitialize5.pos, playerConfig = _assertThisInitialize5.playerConfig, _state = _assertThisInitialize5._state;
+        if (!pos) {
+          return;
+        }
+        e2.stopPropagation();
+        e2.preventDefault();
+        util$3.checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
+        util$3.checkIsFunction(config.onMoveEnd) && config.onMoveEnd();
+        util$3.event(e2);
+        util$3.removeClass(_this.progressBtn, "active");
+        var ret = _this.computeTime(e2, pos.x);
+        ret.prePlayTime = _state.prePlayTime;
+        if (pos.moving) {
+          _this.triggerCallbacks("dragend", ret, e2);
+          _this.emitUserAction("drag", "dragend", ret);
+        } else {
+          _this.triggerCallbacks("click", ret, e2);
+          _this.emitUserAction("click", "click", ret);
+        }
+        _this._mouseUpHandlerHook(e2, ret);
+        pos.moving = false;
+        pos.isDown = false;
+        pos.x = 0;
+        pos.y = 0;
+        pos.isLocked = true;
+        _state.prePlayTime = 0;
+        _state.time = 0;
+        var eventType = e2.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(e2);
+          } 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(e2) {
+        var _assertThisInitialize6 = _assertThisInitialized(_this), _state = _assertThisInitialize6._state, pos = _assertThisInitialize6.pos, player = _assertThisInitialize6.player, config = _assertThisInitialize6.config;
+        if (util$3.checkTouchSupport()) {
+          e2.preventDefault();
         }
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        if (this.config.disable || this.playerConfig.isLive) {
+        util$3.event(e2);
+        var _ePos = util$3.getEventPos(e2, 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(e2, x2);
+        ret.prePlayTime = _state.prePlayTime;
+        _this._mouseMoveHandlerHook(e2, ret);
+      });
+      _defineProperty$1(_assertThisInitialized(_this), "onMouseOut", function(e2) {
+        _this.triggerCallbacks("mouseout", null, e2);
+      });
+      _defineProperty$1(_assertThisInitialized(_this), "onMouseOver", function(e2) {
+        _this.triggerCallbacks("mouseover", null, e2);
+      });
+      _defineProperty$1(_assertThisInitialized(_this), "onMouseEnter", function(e2) {
+        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(e2);
+        var _ePos = util$3.getEventPos(e2, player.zoom);
+        var x2 = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
+        var ret = _this.computeTime(e2, x2);
+        _this.triggerCallbacks("mouseenter", ret, e2);
+        _this.focus();
+      });
+      _defineProperty$1(_assertThisInitialized(_this), "onMouseLeave", function(e2) {
+        _this.triggerCallbacks("mouseleave", null, e2);
+        _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(e2) {
-        _this.emit("icon_mouseenter", {
-          pluginName: _this.pluginName
-        });
-      });
-      _defineProperty$1(_assertThisInitialized(_this), "_onMouseLeave", function(e2) {
-        _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(e2) {
-        e2.preventDefault();
-        e2.stopPropagation();
-        var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player;
-        _this.emitUserAction(e2, "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(e2) {
-          e2.preventDefault();
-          e2.stopPropagation();
-          _this.config.onClick(e2);
-        };
-        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(e2) {
-        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(e2) {
-          });
+      }
+    }, {
+      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(e2) {
-            var fullscreen = _this2.player.fullscreen;
-            _this2.emitUserAction(e2, "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(e2) {
-                  _this2.handleFullscreen(e2);
-                }
-              }
-            }
-          });
+        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(e2, 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: e2
         };
       }
     }, {
-      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(e2) {
-        if (e2 instanceof Event) {
-          e2.preventDefault();
-          e2.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(e2) {
-          });
-        } catch (e2) {
-        }
-      }
-    }, {
-      key: "unlockScreen",
-      value: function unlockScreen() {
-        try {
-          screen.orientation.unlock().catch(function(e2) {
-          });
-        } catch (e2) {
-        }
+        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);
@@ -4541,6 +4688,7 @@ var __publicField = (obj, key, value) => {
         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",
@@ -4962,141 +5110,6 @@ var __publicField = (obj, key, value) => {
     }]);
     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(e2) {
-            e2.preventDefault();
-            e2.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(e2) {
-        e2.preventDefault();
-        e2.stopPropagation();
-        var isCssfullScreen = this.player.isCssfullScreen;
-        this.emitUserAction(e2, "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) {
@@ -5466,6 +5479,9 @@ var __publicField = (obj, key, value) => {
     }, {
       key: "shouldBlockVideoContent",
       get: function get() {
+        if (sniffer.os.isTizen || sniffer.os.isWebOS) {
+          return false;
+        }
         return this.isLinearAdRunning || this._shouldBlockVideoContent;
       },
       set: function set(flag) {
@@ -5628,12 +5644,6 @@ var __publicField = (obj, key, value) => {
             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
@@ -5659,8 +5669,6 @@ var __publicField = (obj, key, value) => {
               _this.plugin.emit(AD_PLAY, {
                 ad
               });
-              intervalTimer = setInterval(function() {
-              }, 300);
             }
             break;
           }
@@ -5737,7 +5745,6 @@ var __publicField = (obj, key, value) => {
       _this.displayContainer = null;
       _this.adsLoader = null;
       _this.adsManager = null;
-      _this._resumeCallback = null;
       return _this;
     }
     _createClass$2(ImaAdManager2, [{
@@ -5786,15 +5793,9 @@ var __publicField = (obj, key, value) => {
       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() {
@@ -6027,27 +6028,28 @@ var __publicField = (obj, key, value) => {
       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];
@@ -6055,7 +6057,7 @@ var __publicField = (obj, key, value) => {
                   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();
               }
@@ -6246,9 +6248,15 @@ var __publicField = (obj, key, value) => {
           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]);
           }
@@ -6316,11 +6324,23 @@ var __publicField = (obj, key, value) => {
           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);
         });
@@ -6355,8 +6375,8 @@ var __publicField = (obj, key, value) => {
           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);
           }
@@ -6364,6 +6384,18 @@ var __publicField = (obj, key, value) => {
             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) {
@@ -6471,7 +6503,7 @@ var __publicField = (obj, key, value) => {
     _createClass$2(AdsPlugin2, [{
       key: "version",
       get: function get() {
-        return "3.0.21-rc.4";
+        return "3.0.23-rc.1";
       }
     }, {
       key: "paused",
@@ -6533,55 +6565,37 @@ var __publicField = (obj, key, value) => {
       }
     }, {
       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() {