xgplayer 2.32.5 → 2.32.6

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

@@ -0,0 +1,62 @@
+/**
+ * @typedef {{
+ *   isShow?: boolean,
+ *   urls?: Array<string>, // 有多张大图就多个url
+ *   pic_num?: number, // 每张图含有几个雪碧图
+ *   col?: number, // 截图列数
+ *   row?: number, // 截图行数
+ *   height?: number, // 缩略图高度
+ *   width?: number, // 缩略图宽度
+ *   scale?: number, // 缩放
+ *   className?: string, // 额外添加在dom上的class
+ *   hidePortrait?: boolean, // 是否在竖屏的时候隐藏
+ *   [propName: string]: any
+ * }} IThumbnailConfig
+ */
+export default class Thumbnail extends BasePlugin {
+    /**
+     * @type IThumbnailConfig
+     */
+    static get defaultConfig(): IThumbnailConfig;
+    constructor(args: any);
+    ratio: number;
+    interval: any;
+    _preloadMark: {};
+    setConfig(config: any): void;
+    get usable(): boolean;
+    initThumbnail(): void;
+    getUrlByIndex(index: any): any;
+    preload(index: any): void;
+    getPosition(now: any, containerWidth?: number, containerHeight?: number): {
+        urlIndex: number;
+        rowIndex: number;
+        colIndex: number;
+        url: any;
+        height: number;
+        width: number;
+        style: {
+            backgroundImage: string;
+            backgroundSize: string;
+            backgroundPosition: string;
+            width: string;
+            height: string;
+        };
+    };
+    update(dom: any, now: any, containerWidth?: number, containerHeight?: number, customStyle?: string): void;
+    changeConfig(newConfig?: {}): void;
+    createThumbnail(root: any, className: any): HTMLElement;
+}
+export type IThumbnailConfig = {
+    [propName: string]: any;
+    isShow?: boolean;
+    urls?: Array<string>;
+    pic_num?: number;
+    col?: number;
+    row?: number;
+    height?: number;
+    width?: number;
+    scale?: number;
+    className?: string;
+    hidePortrait?: boolean;
+};
+import BasePlugin from "../../plugin";

package/es/plugins/common/thumbnail.js

@@ -0,0 +1,191 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import { DURATION_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var Thumbnail = /* @__PURE__ */ function(_BasePlugin) {
+  _inherits(Thumbnail2, _BasePlugin);
+  var _super = _createSuper(Thumbnail2);
+  function Thumbnail2(args) {
+    var _this;
+    _classCallCheck(this, Thumbnail2);
+    _this = _super.call(this, args);
+    _this.ratio = 1;
+    _this.interval = null;
+    _this._preloadMark = {};
+    return _this;
+  }
+  _createClass(Thumbnail2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      if (this.usable) {
+        this.initThumbnail();
+      }
+      this.on([DURATION_CHANGE], function() {
+        var _this2$config = _this2.config, pic_num = _this2$config.pic_num, interval = _this2$config.interval;
+        _this2.usable && (_this2.interval = interval > 0 ? interval : Math.round(_this2.player.duration * 1e3 / pic_num) / 1e3);
+      });
+    }
+  }, {
+    key: "setConfig",
+    value: function setConfig(config) {
+      var _this3 = this;
+      if (!config) {
+        return;
+      }
+      var keys = Object.keys(config);
+      if (keys.length < 1) {
+        return;
+      }
+      keys.forEach(function(key) {
+        _this3.config[key] = config[key];
+      });
+      this.usable && this.initThumbnail();
+    }
+  }, {
+    key: "usable",
+    get: function get() {
+      var _this$config = this.config, urls = _this$config.urls, pic_num = _this$config.pic_num;
+      return urls && urls.length > 0 && pic_num > 0;
+    }
+  }, {
+    key: "initThumbnail",
+    value: function initThumbnail() {
+      var _this$config2 = this.config, width = _this$config2.width, height = _this$config2.height, pic_num = _this$config2.pic_num, interval = _this$config2.interval;
+      this.ratio = width / height * 100;
+      this.interval = interval || Math.round(this.player.duration / pic_num);
+      this._preloadMark = {};
+    }
+  }, {
+    key: "getUrlByIndex",
+    value: function getUrlByIndex(index) {
+      return index >= 0 && index < this.config.urls.length ? this.config.urls[index] : "";
+    }
+  }, {
+    key: "preload",
+    value: function preload(index) {
+      var _this4 = this;
+      if (this._preloadMark[index]) {
+        return;
+      }
+      var urls = this.config.urls;
+      var len = urls.length;
+      var arr = [];
+      index > 0 && arr.push(index - 1);
+      arr.push(index);
+      index > 0 && index < len - 1 && arr.push(index + 1);
+      arr.map(function(item) {
+        if (!_this4._preloadMark[item] && item >= 0 && item < len) {
+          _this4._preloadMark[item] = 1;
+          util.preloadImg(urls[item], function() {
+            _this4._preloadMark[item] = 2;
+          });
+        }
+      });
+    }
+  }, {
+    key: "getPosition",
+    value: function getPosition(now) {
+      var containerWidth = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+      var containerHeight = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
+      var _this$config3 = this.config, pic_num = _this$config3.pic_num, row = _this$config3.row, col = _this$config3.col, width = _this$config3.width, height = _this$config3.height;
+      this.interval = Math.round(this.player.duration / pic_num);
+      var index = Math.ceil(now / this.interval);
+      index = index > pic_num ? pic_num : index;
+      var urlIndex = index < row * col ? 0 : Math.ceil(index / (row * col)) - 1;
+      var indexInPage = index - urlIndex * (col * row);
+      var rowIndex = indexInPage > 0 ? Math.ceil(indexInPage / col) - 1 : 0;
+      var colIndex = indexInPage > 0 ? indexInPage - rowIndex * col - 1 : 0;
+      var swidth = 0;
+      var sHeight = 0;
+      if (containerWidth && containerHeight) {
+        var per = containerWidth / containerHeight;
+        if (per < width / height) {
+          sHeight = containerHeight;
+          swidth = sHeight * (width / height);
+        } else {
+          swidth = containerWidth;
+          sHeight = swidth / (width / height);
+        }
+      } else if (!containerHeight) {
+        swidth = containerWidth || width;
+        sHeight = swidth / (width / height);
+      } else if (!containerWidth) {
+        sHeight = containerHeight || height;
+        swidth = sHeight * (width / height);
+      }
+      var url = this.getUrlByIndex(urlIndex);
+      return {
+        urlIndex,
+        rowIndex,
+        colIndex,
+        url,
+        height: sHeight,
+        width: swidth,
+        style: {
+          backgroundImage: "url(".concat(url, ")"),
+          backgroundSize: "".concat(swidth * col, "px auto"),
+          backgroundPosition: "-".concat(colIndex * swidth, "px -").concat(rowIndex * sHeight, "px"),
+          width: "".concat(swidth, "px"),
+          height: "".concat(sHeight, "px")
+        }
+      };
+    }
+  }, {
+    key: "update",
+    value: function update(dom, now) {
+      var containerWidth = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
+      var containerHeight = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
+      var customStyle = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : "";
+      var _this$config4 = this.config, pic_num = _this$config4.pic_num, urls = _this$config4.urls;
+      if (pic_num <= 0 || !urls || urls.length === 0) {
+        return;
+      }
+      var pos = this.getPosition(now, containerWidth, containerHeight);
+      this.preload(pos.urlIndex);
+      Object.keys(pos.style).map(function(key) {
+        dom.style[key] = pos.style[key];
+      });
+      Object.keys(customStyle).map(function(key) {
+        dom.style[key] = customStyle[key];
+      });
+    }
+  }, {
+    key: "changeConfig",
+    value: function changeConfig() {
+      var newConfig = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      this.setConfig(newConfig);
+    }
+  }, {
+    key: "createThumbnail",
+    value: function createThumbnail(root, className) {
+      var dom = util.createDom("xg-thumbnail", "", {}, "thumbnail ".concat(className));
+      root && root.appendChild(dom);
+      return dom;
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "thumbnail";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        isShow: false,
+        urls: [],
+        pic_num: 0,
+        col: 0,
+        row: 0,
+        height: 90,
+        width: 160,
+        scale: 1,
+        className: "",
+        hidePortrait: false
+      };
+    }
+  }]);
+  return Thumbnail2;
+}(Plugin);
+export { Thumbnail as default };

package/es/plugins/common/thumbnail.scss

@@ -0,0 +1,27 @@
+
+.xgplayer {
+  xg-thumbnail {
+    display: block;
+  }
+}
+// .xgplayer {
+//   xg-thumbnail {
+//     display: none;
+//     position: relative;
+//     width: 160px;
+//     height: 90px;
+//     &.show {
+//       display: block;
+//     }
+//   }
+
+//   @media only screen and (max-width: 480px) {
+//     .xgplayer-mobile xg-thumbnail {
+//       width: 120px;
+//       height: 67px;
+//       &.portrait {
+//         display: none;
+//       }
+//     }
+//   }
+// }

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;
+}

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

@@ -0,0 +1,73 @@
+export default Controls;
+export type IControlsConfig = {
+    [propName: string]: any;
+    disable?: boolean;
+    autoHide?: boolean;
+    mode?: "flex" | "normal" | "bottom";
+    initShow?: boolean;
+};
+/**
+  * @typedef {{
+  *   disable?: boolean,
+  *   autoHide?: boolean,
+  *   mode?: "flex"|"normal"|"bottom",
+  *   initShow?: boolean,
+  *   [propName: string]: any
+  * }} IControlsConfig
+  */
+declare class Controls extends Plugin {
+    /**
+     * @type IControlsConfig
+     */
+    static get defaultConfig(): IControlsConfig;
+    beforeCreate(args: any): void;
+    /**
+     * @type { HTMLElement}
+     * @readonly
+     */
+    readonly left: HTMLElement;
+    /**
+     * @type { HTMLElement}
+     * @readonly
+     */
+    readonly center: HTMLElement;
+    /**
+     * @type { HTMLElement}
+     * @readonly
+     */
+    readonly right: HTMLElement;
+    /**
+     * @type { HTMLElement}
+     * @readonly
+     */
+    readonly innerRoot: HTMLElement;
+    onMouseEnter: (e: any) => void;
+    onMouseLeave: (e: any) => void;
+    focus(): void;
+    focusAwhile(): void;
+    blur(): void;
+    recoverAutoHide(): void;
+    pauseAutoHide(): void;
+    show(): void;
+    /**
+     * @type {string}
+     */
+    get mode(): string;
+    /**
+     *
+     * @param {} plugin
+     * @param { {config?: {[propName: string]: any}, position?:string, root?: HTMLElement, pluginName?: string}} options
+     * @param { string } name
+     * @returns { any }
+     */
+    registerPlugin(plugin: any, options: {
+        config?: {
+            [propName: string]: any;
+        };
+        position?: string;
+        root?: HTMLElement;
+        pluginName?: string;
+    }, name: string): any;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/controls/index.js

@@ -0,0 +1,189 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import sniffer from "../../utils/sniffer.js";
+import { MINI_STATE_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+import STATE_CLASS from "../../stateClassMap.js";
+var Controls = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Controls2, _Plugin);
+  var _super = _createSuper(Controls2);
+  function Controls2() {
+    var _this;
+    _classCallCheck(this, Controls2);
+    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(_assertThisInitialized(_this), "onMouseEnter", function(e) {
+      var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player, playerConfig = _assertThisInitialize.playerConfig;
+      playerConfig.closeControlsBlur && player.focus({
+        autoHide: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function(e) {
+      var _assertThisInitialize2 = _assertThisInitialized(_this), player = _assertThisInitialize2.player;
+      player.focus();
+    });
+    return _this;
+  }
+  _createClass(Controls2, [{
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      if (!args.config.mode && sniffer.device === "mobile") {
+        args.config.mode = "flex";
+      }
+      if (args.player.config.marginControls) {
+        args.config.autoHide = false;
+      }
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      var _this$config = this.config, disable = _this$config.disable, height = _this$config.height, mode = _this$config.mode;
+      if (disable) {
+        return;
+      }
+      mode === "flex" && this.player.addClass(STATE_CLASS.FLEX_CONTROLS);
+      var style = {
+        height: "".concat(height, "px")
+      };
+      Object.keys(style).map(function(key) {
+        _this2.root.style[key] = style[key];
+      });
+      this.left = this.find("xg-left-grid");
+      this.center = this.find("xg-center-grid");
+      this.right = this.find("xg-right-grid");
+      this.innerRoot = this.find("xg-inner-controls");
+      this.on(MINI_STATE_CHANGE, function(isMini) {
+        isMini ? util.addClass(_this2.root, "mini-controls") : util.removeClass(_this2.root, "mini-controls");
+      });
+      var isMobileSimulateMode = this.playerConfig.isMobileSimulateMode;
+      if (sniffer.device !== "mobile" && isMobileSimulateMode !== "mobile") {
+        this.bind("mouseenter", this.onMouseEnter);
+        this.bind("mouseleave", this.onMouseLeave);
+      }
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.player.focus({
+        autoHide: false
+      });
+    }
+  }, {
+    key: "focusAwhile",
+    value: function focusAwhile() {
+      this.player.focus({
+        autoHide: true
+      });
+    }
+  }, {
+    key: "blur",
+    value: function blur() {
+      this.player.blur({
+        ignorePaused: true
+      });
+    }
+  }, {
+    key: "recoverAutoHide",
+    value: function recoverAutoHide() {
+      this.config.autoHide && util.addClass(this.root, STATE_CLASS.CONTROLS_AUTOHIDE);
+    }
+  }, {
+    key: "pauseAutoHide",
+    value: function pauseAutoHide() {
+      util.removeClass(this.root, STATE_CLASS.CONTROLS_AUTOHIDE);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.root.style.display = "";
+      this.player.focus();
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.root.style.display = "none";
+    }
+  }, {
+    key: "mode",
+    get: function get() {
+      return this.config.mode;
+    }
+  }, {
+    key: "registerPlugin",
+    value: function registerPlugin(plugin) {
+      var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+      var name = arguments.length > 2 ? arguments[2] : void 0;
+      if (!this.root) {
+        return;
+      }
+      var defaultConfig = plugin.defaultConfig || {};
+      if (!options.root) {
+        var position = options.position ? options.position : options.config && options.config.position ? options.config.position : defaultConfig.position;
+        switch (position) {
+          case POSITIONS.CONTROLS_LEFT:
+            options.root = this.left;
+            break;
+          case POSITIONS.CONTROLS_RIGHT:
+            options.root = this.right;
+            break;
+          case POSITIONS.CONTROLS_CENTER:
+            options.root = this.center;
+            break;
+          case POSITIONS.CONTROLS:
+            options.root = this.root;
+            break;
+          default:
+            options.root = this.left;
+        }
+        return _get(_getPrototypeOf(Controls2.prototype), "registerPlugin", this).call(this, plugin, options, name);
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (sniffer.device !== "mobile") {
+        this.unbind("mouseenter", this.onMouseEnter);
+        this.unbind("mouseleave", this.onMouseLeave);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$config2 = this.config, mode = _this$config2.mode, autoHide = _this$config2.autoHide, initShow = _this$config2.initShow, disable = _this$config2.disable;
+      if (disable) {
+        return;
+      }
+      var className = util.classNames({
+        "xgplayer-controls": true
+      }, {
+        "flex-controls": mode === "flex"
+      }, {
+        "bottom-controls": mode === "bottom"
+      }, _defineProperty({}, STATE_CLASS.CONTROLS_AUTOHIDE, autoHide), {
+        "xgplayer-controls-initshow": initShow || !autoHide
+      });
+      return '<xg-controls class="'.concat(className, '" unselectable="on">\n    <xg-inner-controls class="xg-inner-controls xg-pos">\n      <xg-left-grid class="xg-left-grid">\n      </xg-left-grid>\n      <xg-center-grid class="xg-center-grid"></xg-center-grid>\n      <xg-right-grid class="xg-right-grid">\n      </xg-right-grid>\n    </xg-inner-controls>\n    </xg-controls>');
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "controls";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        disable: false,
+        autoHide: true,
+        mode: "",
+        initShow: false
+      };
+    }
+  }]);
+  return Controls2;
+}(Plugin);
+export { Controls as default };