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

package/es/plugin/basePlugin.d.ts

@@ -93,8 +93,10 @@ declare class BasePlugin {
      * @type { string }
      */
     get lang(): string;
-    get i18n(): any;
-    get i18nKeys(): any;
+    get i18n(): import("../lang/i18n").IXGI18nText;
+    get i18nKeys(): {
+        [propName: string]: string;
+    };
     /**
      * @description当前支持的事件类型
      * @type { 'touch' | 'mouse' }
@@ -170,8 +172,9 @@ declare class BasePlugin {
     getPlugin(name: string): any | null;
     __destroy(): void;
 }
+import Util from "../utils/util";
 import Sniffer from "../utils/sniffer";
 import Errors from "../error";
 import * as Events from "../events";
 import XG_DEBUG from "../utils/debug";
-export { BasePlugin as default, Sniffer, Errors, Events, XG_DEBUG };
+export { BasePlugin as default, Util, Sniffer, Errors, Events, XG_DEBUG };

package/es/plugin/basePlugin.js

@@ -1,5 +1,6 @@
 import { createClass as _createClass, classCallCheck as _classCallCheck, objectSpread2 as _objectSpread2 } from "../_virtual/_rollupPluginBabelHelpers.js";
-import { checkIsFunction, clearAllTimers, checkTouchSupport } from "../utils/util.js";
+import util from "../utils/util.js";
+export { default as Util } from "../utils/util.js";
 import XG_DEBUG from "../utils/debug.js";
 export { default as XG_DEBUG } from "../utils/debug.js";
 import hooksDescriptor, { hook, useHooks, removeHooks, delHooksDescriptor } from "./hooksDescriptor.js";
@@ -9,7 +10,7 @@ function showErrorMsg(pluginName, msg) {
 var BasePlugin = /* @__PURE__ */ function() {
   function BasePlugin2(args) {
     _classCallCheck(this, BasePlugin2);
-    if (checkIsFunction(this.beforeCreate)) {
+    if (util.checkIsFunction(this.beforeCreate)) {
       this.beforeCreate(args);
     }
     hooksDescriptor(this);
@@ -79,7 +80,7 @@ var BasePlugin = /* @__PURE__ */ function() {
   }, {
     key: "domEventType",
     get: function get() {
-      var _e = checkTouchSupport() ? "touch" : "mouse";
+      var _e = util.checkTouchSupport() ? "touch" : "mouse";
       if (this.playerConfig && (this.playerConfig.domEventType === "touch" || this.playerConfig.domEventType === "mouse")) {
         _e = this.playerConfig.domEventType;
       }
@@ -223,8 +224,8 @@ var BasePlugin = /* @__PURE__ */ function() {
       var player = this.player;
       var pluginName = this.pluginName;
       this.offAll();
-      clearAllTimers(this);
-      if (checkIsFunction(this.destroy)) {
+      util.clearAllTimers(this);
+      if (util.checkIsFunction(this.destroy)) {
         this.destroy();
       }
       ["player", "playerConfig", "pluginName", "logger", "__args", "__hooks"].map(function(item) {

package/es/plugin/index.d.ts

@@ -6,7 +6,8 @@ import { POSITIONS } from "./plugin";
 import { ROOT_TYPES } from "./plugin";
 import Sniffer from "../utils/sniffer";
 import Errors from "../error";
+import Util from "../utils/util";
 import * as Events from "../events";
 import { STATES } from "../state";
 import Plugin from "./plugin";
-export { pluginsManager, BasePlugin, hooksDescriptor, STATE_CLASS, POSITIONS, ROOT_TYPES, Sniffer, Errors, Events, STATES, Plugin as default };
+export { pluginsManager, BasePlugin, hooksDescriptor, STATE_CLASS, POSITIONS, ROOT_TYPES, Sniffer, Errors, Util, Events, STATES, Plugin as default };

package/es/plugin/plugin.d.ts

@@ -100,7 +100,6 @@ declare class Plugin extends BasePlugin {
      */
     private _children;
     updateLang(lang: any): void;
-    get lang(): any;
     changeLangTextKey(dom: any, key?: string): void;
     plugins(): any[];
     children(): {};

package/es/plugin/plugin.js

@@ -1,8 +1,8 @@
 import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck, get as _get, getPrototypeOf as _getPrototypeOf, typeof as _typeof } from "../_virtual/_rollupPluginBabelHelpers.js";
 import BasePlugin from "./basePlugin.js";
-import { createDom, deepCopy, typeOf, addClass, createDomFromHtml } from "../utils/util.js";
 import _delegate from "delegate";
 import XG_DEBUG from "../utils/debug.js";
+import util from "../utils/util.js";
 var ROOT_TYPES = {
   CONTROLS: "controls",
   ROOT: "root"
@@ -44,7 +44,7 @@ function createIcon(icon, key) {
   var pluginName = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : "";
   var newIcon = null;
   if (icon instanceof window.Element) {
-    addClass(icon, classname);
+    util.addClass(icon, classname);
     Object.keys(attr).map(function(key2) {
       icon.setAttribute(key2, attr[key2]);
     });
@@ -52,14 +52,14 @@ function createIcon(icon, key) {
   }
   if (isUrl(icon) || isUrl(icon.url)) {
     attr.src = isUrl(icon) ? icon : icon.url || "";
-    newIcon = createDom(icon.tag || "img", "", attr, "xg-img ".concat(classname));
+    newIcon = util.createDom(icon.tag || "img", "", attr, "xg-img ".concat(classname));
     return newIcon;
   }
   if (typeof icon === "function") {
     try {
       newIcon = icon();
       if (newIcon instanceof window.Element) {
-        addClass(newIcon, classname);
+        util.addClass(newIcon, classname);
         Object.keys(attr).map(function(key2) {
           newIcon.setAttribute(key2, attr[key2]);
         });
@@ -74,7 +74,7 @@ function createIcon(icon, key) {
     }
   }
   if (typeof icon === "string") {
-    return createDomFromHtml(icon, attr, classname);
+    return util.createDomFromHtml(icon, attr, classname);
   }
   XG_DEBUG.logWarn("warn>>icons.".concat(key, " in config of plugin named [").concat(pluginName, "] is invalid"));
   return null;
@@ -150,7 +150,7 @@ var Plugin = /* @__PURE__ */ function(_BasePlugin) {
         _el = Plugin2.insert(renderStr, _parent, args.index);
         _el.setAttribute("data-index", args.index);
       } else if (args.tag) {
-        _el = createDom(args.tag, "", args.attr, args.name);
+        _el = util.createDom(args.tag, "", args.attr, args.name);
         _el.setAttribute("data-index", args.index);
         _parent.appendChild(_el);
       } else {
@@ -189,7 +189,7 @@ var Plugin = /* @__PURE__ */ function(_BasePlugin) {
               config = _this2.config[name] || {};
               _Plugin = _plugin;
             } else if (_typeof(_plugin) === "object" && typeof _plugin.plugin === "function") {
-              config = _plugin.options ? deepCopy(_this2.config[name] || {}, _plugin.options) : _this2.config[name] || {};
+              config = _plugin.options ? util.deepCopy(_this2.config[name] || {}, _plugin.options) : _this2.config[name] || {};
               _Plugin = _plugin.plugin;
             }
             options.config = config;
@@ -331,9 +331,9 @@ var Plugin = /* @__PURE__ */ function(_BasePlugin) {
       if (!this.root) {
         return;
       }
-      if (typeOf(name) === "String") {
+      if (util.typeOf(name) === "String") {
         return this.root.style[name] = value;
-      } else if (typeOf(name) === "Object") {
+      } else if (util.typeOf(name) === "Object") {
         Object.keys(name).map(function(key) {
           _this5.root.style[key] = name[key];
         });
@@ -346,9 +346,9 @@ var Plugin = /* @__PURE__ */ function(_BasePlugin) {
       if (!this.root) {
         return;
       }
-      if (typeOf(name) === "String") {
+      if (util.typeOf(name) === "String") {
         return this.root.setAttribute(name, value);
-      } else if (typeOf(name) === "Object") {
+      } else if (util.typeOf(name) === "Object") {
         Object.keys(name).map(function(key) {
           _this6.root.setAttribute(key, name[key]);
         });

package/es/plugin/pluginsManager.d.ts

@@ -57,6 +57,20 @@ declare namespace pluginsManager {
     }): {
         [propName: string]: any;
     };
+    /**
+     * register a lazy plugin
+     * @param { any } player instance
+     * @param { any } lazyPlugin config
+     *
+     */
+    function lazyRegister(player: any, lazyPlugin: any): Promise<any>;
+    /**
+     * register a lazy plugin
+     * @param { any } player instance
+     * @param { any } lazyPlugin config
+     *
+     */
+    function lazyRegister(player: any, lazyPlugin: any): Promise<any>;
     /**
     * register a Plugin
     * @param { any } player the plugins register

package/es/plugin/pluginsManager.js

@@ -1,5 +1,5 @@
 import { addObserver, unObserver } from "./resizeObserver.js";
-import { typeOf } from "../utils/util.js";
+import util from "../utils/util.js";
 var pluginsManager = {
   pluginGroup: {},
   init: function init(player) {
@@ -68,7 +68,7 @@ var pluginsManager = {
         break;
       }
     }
-    if (typeOf(_pConfig) === "Object") {
+    if (util.typeOf(_pConfig) === "Object") {
       return {
         root: _pConfig.root,
         position: _pConfig.position
@@ -76,6 +76,23 @@ var pluginsManager = {
     }
     return {};
   },
+  lazyRegister: function lazyRegister(player, lazyPlugin) {
+    var _this = this;
+    var timeout = lazyPlugin.timeout || 1500;
+    return Promise.race([lazyPlugin.loader().then(function(plugin) {
+      var result;
+      if (plugin && plugin.__esModule) {
+        result = plugin.default;
+      } else {
+        result = plugin;
+      }
+      _this.register(player, result, plugin.options);
+    }), new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        reject(new Error("timeout"));
+      }, timeout);
+    })]);
+  },
   register: function register(player, plugin) {
     var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     if (!player || !plugin || typeof plugin !== "function" || plugin.prototype === void 0) {
@@ -106,9 +123,9 @@ var pluginsManager = {
     for (var i = 0; i < keys.length; i++) {
       if (pluginName.toLowerCase() === keys[i].toLowerCase()) {
         var config = originalOptions[keys[i]];
-        if (typeOf(config) === "Object") {
+        if (util.typeOf(config) === "Object") {
           options.config = Object.assign({}, options.config, originalOptions[keys[i]]);
-        } else if (typeOf(config) === "Boolean") {
+        } else if (util.typeOf(config) === "Boolean") {
           options.config.disable = !config;
         }
         break;
@@ -128,14 +145,13 @@ var pluginsManager = {
     }
     options.index = options.config.index || 0;
     try {
-      var pluginNameL = pluginName.toLowerCase();
-      if (plugins[pluginNameL]) {
-        this.unRegister(cgid, pluginNameL);
+      if (plugins[pluginName.toLowerCase()]) {
+        this.unRegister(cgid, pluginName.toLowerCase());
         console.warn("the is one plugin with same pluginName [".concat(pluginName, "] exist, destroy the old instance"));
       }
       var _instance = new plugin(options);
-      plugins[pluginNameL] = _instance;
-      plugins[pluginNameL].func = plugin;
+      plugins[pluginName.toLowerCase()] = _instance;
+      plugins[pluginName.toLowerCase()].func = plugin;
       if (_instance && typeof _instance.afterCreate === "function") {
         _instance.afterCreate();
       }
@@ -179,7 +195,7 @@ var pluginsManager = {
     return this.pluginGroup[cgid]._plugins[cName];
   },
   beforeInit: function beforeInit(player) {
-    var _this = this;
+    var _this2 = this;
     function retPromise(fun) {
       if (!fun || !fun.then) {
         return new Promise(function(resolve) {
@@ -190,7 +206,7 @@ var pluginsManager = {
       }
     }
     return new Promise(function(resolve) {
-      if (!_this.pluginGroup) {
+      if (!_this2.pluginGroup) {
         return;
       }
       var prevTask;
@@ -201,11 +217,11 @@ var pluginsManager = {
       }
       return prevTask.then(function() {
         var cgid = player._pluginInfoId;
-        if (!_this.pluginGroup[cgid]) {
+        if (!_this2.pluginGroup[cgid]) {
           resolve();
           return;
         }
-        var plugins = _this.pluginGroup[cgid]._plugins;
+        var plugins = _this2.pluginGroup[cgid]._plugins;
         var pluginsRet = [];
         Object.keys(plugins).forEach(function(pName) {
           if (plugins[pName] && plugins[pName].beforePlayerInit) {
@@ -258,7 +274,7 @@ var pluginsManager = {
     });
   },
   reRender: function reRender(player) {
-    var _this2 = this;
+    var _this3 = this;
     var cgid = player._pluginInfoId;
     if (!cgid || !this.pluginGroup[cgid]) {
       return;
@@ -271,11 +287,11 @@ var pluginsManager = {
           plugin: plugins[pName].func,
           options: plugins[pName].__args
         });
-        _this2.unRegister(cgid, pName);
+        _this3.unRegister(cgid, pName);
       }
     });
     _pList.forEach(function(item) {
-      _this2.register(player, item.plugin, item.options);
+      _this3.register(player, item.plugin, item.options);
     });
   },
   onPluginsReady: function onPluginsReady(player) {

package/es/plugin/resizeObserver.js

@@ -1,5 +1,5 @@
 import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from "../_virtual/_rollupPluginBabelHelpers.js";
-import { throttle } from "../utils/throttle.js";
+import { throttle } from "../utils/util.js";
 import { PLATER_ID } from "../constant.js";
 var ResizeObserver = /* @__PURE__ */ function() {
   function ResizeObserver2() {

package/es/plugins/common/iconPlugin.js

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

package/es/plugins/common/optionList.js

@@ -1,6 +1,6 @@
 import { createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
 import sniffer from "../../utils/sniffer.js";
-import { createDom, hasClass, addClass, removeClass } from "../../utils/util.js";
 import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
 var OptionList = /* @__PURE__ */ function() {
@@ -8,7 +8,7 @@ var OptionList = /* @__PURE__ */ function() {
     _classCallCheck(this, OptionList2);
     this.config = args.config;
     this.parent = args.root;
-    this.root = createDom("ul", "", {}, "xg-options-list xg-list-slide-scroll ".concat(this.config.className));
+    this.root = util.createDom("ul", "", {}, "xg-options-list xg-list-slide-scroll ".concat(this.config.className));
     args.root.appendChild(this.root);
     var maxHeight = this.config.maxHeight;
     if (maxHeight) {
@@ -43,7 +43,7 @@ var OptionList = /* @__PURE__ */ function() {
       data.map(function(item, index) {
         var className = item.selected ? "option-item selected" : "option-item";
         item["data-index"] = index;
-        _this.root.appendChild(createDom("li", "<span>".concat(item.showText, "</span>"), item, className));
+        _this.root.appendChild(util.createDom("li", "<span>".concat(item.showText, "</span>"), item, className));
       });
     }
   }, {
@@ -53,13 +53,13 @@ var OptionList = /* @__PURE__ */ function() {
         e.delegateTarget = e.target;
       }
       var target = e.delegateTarget;
-      if (target && hasClass(target, "selected")) {
+      if (target && util.hasClass(target, "selected")) {
         return false;
       }
       var changeCallback = typeof this.config.onItemClick === "function" ? this.config.onItemClick : null;
       var curSelected = this.root.querySelector(".selected");
-      addClass(target, "selected");
-      curSelected && removeClass(curSelected, "selected");
+      util.addClass(target, "selected");
+      curSelected && util.removeClass(curSelected, "selected");
       changeCallback(e, {
         from: curSelected ? this.getAttrObj(curSelected, this.attrKeys) : null,
         to: this.getAttrObj(target, this.attrKeys)
@@ -84,14 +84,14 @@ var OptionList = /* @__PURE__ */ function() {
   }, {
     key: "show",
     value: function show() {
-      removeClass(this.root, "hide");
-      addClass(this.root, "active");
+      util.removeClass(this.root, "hide");
+      util.addClass(this.root, "active");
     }
   }, {
     key: "hide",
     value: function hide() {
-      removeClass(this.root, "active");
-      addClass(this.root, "hide");
+      util.removeClass(this.root, "active");
+      util.addClass(this.root, "hide");
     }
   }, {
     key: "setStyle",

package/es/plugins/common/optionsIcon.js

@@ -1,6 +1,6 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, typeof as _typeof } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
 import sniffer from "../../utils/sniffer.js";
-import { addClass, createDom, removeClass, isUndefined } from "../../utils/util.js";
 import { VIDEO_RESIZE, FULLSCREEN_CHANGE, CANPLAY, PLAYER_FOCUS } from "../../events.js";
 import "../../utils/debug.js";
 import Plugin, { POSITIONS } from "../../plugin/plugin.js";
@@ -80,7 +80,7 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
       if (IS_MOBILE && config.listType !== LIST_TYPES.MIDDLE) {
         config.listType = LIST_TYPES.SIDE;
       }
-      config.hidePortrait && addClass(this.root, "portrait");
+      config.hidePortrait && util.addClass(this.root, "portrait");
       this.on([VIDEO_RESIZE, FULLSCREEN_CHANGE], function() {
         _this2._resizeList();
       });
@@ -128,8 +128,8 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
       if (_isIcons) {
         return;
       }
-      this.appendChild(".xgplayer-icon", createDom("span", "", {}, "icon-text"));
-      addClass(this.find(".xgplayer-icon"), "btn-text");
+      this.appendChild(".xgplayer-icon", util.createDom("span", "", {}, "icon-text"));
+      util.addClass(this.find(".xgplayer-icon"), "btn-text");
     }
   }, {
     key: "show",
@@ -137,12 +137,12 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
       if (!this.config.list || this.config.list.length < 2) {
         return;
       }
-      addClass(this.root, "show");
+      util.addClass(this.root, "show");
     }
   }, {
     key: "hide",
     value: function hide() {
-      removeClass(this.root, "show");
+      util.removeClass(this.root, "show");
     }
   }, {
     key: "getTextByLang",
@@ -152,7 +152,7 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
       }
       var list = this.config.list;
       !lang && (lang = this.player.lang);
-      key = !key || isUndefined(item[key]) ? "text" : key;
+      key = !key || util.isUndefined(item[key]) ? "text" : key;
       typeof item === "number" && (item = list[item]);
       try {
         if (_typeof(item[key]) === "object") {
@@ -236,7 +236,7 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
       if (this.config.isShowIcon) {
         var _this$player$root$get = this.player.root.getBoundingClientRect(), height = _this$player$root$get.height;
         var _maxH = config.listType === LIST_TYPES.MIDDLE ? height - 50 : height;
-        if (_maxH) {
+        if (_maxH && config.heightLimit) {
           options.config.maxHeight = "".concat(_maxH, "px");
         }
         this.optionsList = new OptionList(options);
@@ -248,6 +248,9 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
   }, {
     key: "_resizeList",
     value: function _resizeList() {
+      if (!this.config.heightLimit) {
+        return;
+      }
       var _this$player$root$get2 = this.player.root.getBoundingClientRect(), height = _this$player$root$get2.height;
       var _maxH = this.config.listType === LIST_TYPES.MIDDLE ? height - 50 : height;
       this.optionsList && this.optionsList.setStyle({
@@ -295,7 +298,8 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
         hidePortrait: true,
         isShowIcon: false,
         isItemClickHide: true,
-        toggleMode: TOGGLE_MODES.HOVER
+        toggleMode: TOGGLE_MODES.HOVER,
+        heightLimit: true
       };
     }
   }]);

package/es/plugins/common/thumbnail.d.ts

@@ -26,7 +26,6 @@ export default class Thumbnail extends BasePlugin {
     get usable(): boolean;
     initThumbnail(): void;
     getUrlByIndex(index: any): any;
-    preloadImg(url: any, onload?: () => void, onerror?: () => void): void;
     preload(index: any): void;
     getPosition(now: any, containerWidth?: number, containerHeight?: number): {
         urlIndex: number;

package/es/plugins/common/thumbnail.js

@@ -1,5 +1,5 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
-import { createDom } from "../../utils/util.js";
+import util from "../../utils/util.js";
 import { DURATION_CHANGE } from "../../events.js";
 import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
@@ -62,27 +62,6 @@ var Thumbnail = /* @__PURE__ */ function(_BasePlugin) {
     value: function getUrlByIndex(index) {
       return index >= 0 && index < this.config.urls.length ? this.config.urls[index] : "";
     }
-  }, {
-    key: "preloadImg",
-    value: function preloadImg(url) {
-      var onload = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : function() {
-      };
-      var onerror = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : function() {
-      };
-      if (!url) {
-        return;
-      }
-      var img = new window.Image();
-      img.onload = function(e) {
-        img = null;
-        onload && onload(e);
-      };
-      img.onerror = function(e) {
-        img = null;
-        onerror && onerror(e);
-      };
-      img.src = url;
-    }
   }, {
     key: "preload",
     value: function preload(index) {
@@ -99,7 +78,7 @@ var Thumbnail = /* @__PURE__ */ function(_BasePlugin) {
       arr.map(function(item) {
         if (!_this4._preloadMark[item] && item >= 0 && item < len) {
           _this4._preloadMark[item] = 1;
-          _this4.preloadImg(urls[item], function() {
+          util.preloadImg(urls[item], function() {
             _this4._preloadMark[item] = 2;
           });
         }
@@ -181,7 +160,7 @@ var Thumbnail = /* @__PURE__ */ function(_BasePlugin) {
   }, {
     key: "createThumbnail",
     value: function createThumbnail(root, className) {
-      var dom = createDom("xg-thumbnail", "", {}, "thumbnail ".concat(className));
+      var dom = util.createDom("xg-thumbnail", "", {}, "thumbnail ".concat(className));
       root && root.appendChild(dom);
       return dom;
     }

package/es/plugins/controls/index.css

@@ -0,0 +1,132 @@
+.xgplayer.not-allow-autoplay .xgplayer-controls, .xgplayer.xgplayer-nostart .xgplayer-controls {
+  pointer-events: none;
+  visibility: hidden;
+  cursor: default;
+  opacity: 0;
+}
+.xgplayer.xgplayer-inactive .controls-autohide {
+  pointer-events: none;
+  visibility: hidden;
+  cursor: default;
+  opacity: 0;
+}
+.xgplayer.not-allow-autoplay .xgplayer-controls-initshow, .xgplayer.xgplayer-nostart .xgplayer-controls-initshow {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+}
+.xgplayer .xgplayer-controls {
+  display: block;
+  position: absolute;
+  visibility: visible;
+  height: 48px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  z-index: 10;
+  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+.xgplayer .xgplayer-controls.show {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.xgplayer .xg-inner-controls {
+  position: absolute;
+  height: 40px;
+  bottom: 0;
+  justify-content: space-between;
+  display: flex;
+}
+.xgplayer .xg-left-grid, .xgplayer .xg-right-grid {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 1;
+  height: 100%;
+  z-index: 1;
+}
+.xgplayer .xg-right-grid {
+  flex-direction: row-reverse;
+}
+.xgplayer .xg-right-grid > :first-child {
+  margin-right: 0;
+}
+.xgplayer .xg-right-grid xg-icon {
+  margin-left: 0;
+}
+.xgplayer .xg-left-grid > :first-child {
+  margin-left: 0;
+}
+.xgplayer .xg-left-grid xg-icon {
+  margin-right: 0;
+}
+.xgplayer .xg-center-grid {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  outline: none;
+  top: -20px;
+  padding: 5px 0;
+  text-align: center;
+}
+.xgplayer .flex-controls .xg-inner-controls {
+  justify-content: space-around;
+  display: flex;
+  bottom: 8px;
+}
+.xgplayer .flex-controls .xg-center-grid {
+  display: flex;
+  flex: 1;
+  position: relative;
+  top: 0;
+  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  left: 0;
+  right: 0;
+  padding: 0 16px;
+}
+.xgplayer.xgplayer-mobile .xg-center-grid {
+  z-index: 2;
+}
+.xgplayer.xgplayer-mobile .flex-controls .xg-center-grid {
+  padding: 0 8px;
+}
+.xgplayer .bottom-controls .xg-center-grid {
+  top: 20px;
+  padding: 0;
+}
+.xgplayer .bottom-controls .xg-left-grid, .xgplayer .bottom-controls .xg-right-grid {
+  bottom: 10px;
+}
+.xgplayer .mini-controls {
+  background-image: none;
+}
+.xgplayer .mini-controls .xg-inner-controls {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.xgplayer .mini-controls .xg-center-grid {
+  bottom: -28px;
+  top: auto;
+  padding: 0;
+}
+.xgplayer .mini-controls .xg-left-grid, .xgplayer .mini-controls .xg-right-grid {
+  display: none;
+}
+.xgplayer .controls-follow {
+  bottom: 70px;
+  transition: bottom 0.3s ease;
+}
+.xgplayer.flex-controls .controls-follow {
+  bottom: 45px;
+}
+.xgplayer.xgplayer-inactive .controls-follow, .xgplayer.no-controls .controls-follow, .xgplayer.mini-controls .controls-follow {
+  bottom: 10px;
+}