xgplayer 2.32.5 → 2.32.6

package/es/plugins/common/iconPlugin.js

@@ -0,0 +1,42 @@
+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) {
+  _inherits(Icon2, _Plugin);
+  var _super = _createSuper(Icon2);
+  function Icon2() {
+    var _this;
+    _classCallCheck(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(_assertThisInitialized(_this), "_onMouseenter", function(e) {
+      _this.emit("icon_mouseenter", {
+        pluginName: _this.pluginName
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onMouseLeave", function(e) {
+      _this.emit("icon_mouseleave", {
+        pluginName: _this.pluginName
+      });
+    });
+    return _this;
+  }
+  _createClass(Icon2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      this.bind("mouseenter", this._onMouseenter);
+      this.bind("mouseleave", this._onMouseLeave);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind("mouseenter", this._onMouseenter);
+      this.unbind("mouseleave", this._onMouseLeave);
+    }
+  }]);
+  return Icon2;
+}(Plugin);
+export { Icon as default };

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

@@ -0,0 +1 @@
+export function xgIconTips(plugin: any, textKey: any, isShow: any): string;

package/es/plugins/common/iconTools.js

@@ -0,0 +1,8 @@
+function xgIconTips(plugin, textKey, isShow) {
+  try {
+    return ' <div class="xg-tips '.concat(isShow ? "hide" : " ", '" lang-key="').concat(plugin.i18nKeys[textKey], '">\n    ').concat(plugin.i18n[textKey], "\n    </div>");
+  } catch (e) {
+    return '<div class="xg-tips hide"></div>';
+  }
+}
+export { xgIconTips };

package/es/plugins/common/index.scss

@@ -0,0 +1,2 @@
+@import "./optionsIcon.scss";
+@import "./thumbnail.scss";

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

@@ -0,0 +1,15 @@
+export default class OptionList {
+    constructor(args: any);
+    config: any;
+    parent: any;
+    root: HTMLElement;
+    onItemClick(e: any): boolean;
+    _delegates: any;
+    renderItemList(data: any): void;
+    attrKeys: string[];
+    getAttrObj(dom: any, keys: any): {};
+    show(): void;
+    hide(): void;
+    setStyle(style: any): void;
+    destroy(): void;
+}

package/es/plugins/common/optionList.js

@@ -0,0 +1,120 @@
+import { createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import sniffer from "../../utils/sniffer.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var OptionList = /* @__PURE__ */ function() {
+  function OptionList2(args) {
+    _classCallCheck(this, OptionList2);
+    this.config = args.config;
+    this.parent = args.root;
+    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) {
+      this.setStyle({
+        maxHeight
+      });
+    }
+    this.onItemClick = this.onItemClick.bind(this);
+    this.renderItemList();
+    var eventName = sniffer.device === "mobile" ? "touchend" : "click";
+    this._delegates = Plugin.delegate.call(this, this.root, "li", eventName, this.onItemClick);
+  }
+  _createClass(OptionList2, [{
+    key: "renderItemList",
+    value: function renderItemList(data) {
+      var _this = this;
+      var config = this.config, root = this.root;
+      if (data) {
+        config.data = data;
+      } else {
+        data = config.data;
+      }
+      if (config.style) {
+        Object.keys(config.style).map(function(key) {
+          root.style[key] = config[key];
+        });
+      }
+      if (data.length > 0) {
+        this.attrKeys = Object.keys(data[0]);
+      }
+      this.root.innerHTML = "";
+      data.map(function(item, index) {
+        var className = item.selected ? "option-item selected" : "option-item";
+        item["data-index"] = index;
+        _this.root.appendChild(util.createDom("li", "<span>".concat(item.showText, "</span>"), item, className));
+      });
+    }
+  }, {
+    key: "onItemClick",
+    value: function onItemClick(e) {
+      if (!e.delegateTarget) {
+        e.delegateTarget = e.target;
+      }
+      var target = e.delegateTarget;
+      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");
+      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)
+      });
+    }
+  }, {
+    key: "getAttrObj",
+    value: function getAttrObj(dom, keys) {
+      if (!dom || !keys) {
+        return {};
+      }
+      var obj = {};
+      keys.map(function(key) {
+        obj[key] = dom.getAttribute(key);
+      });
+      var index = dom.getAttribute("data-index");
+      if (index) {
+        obj.index = Number(index);
+      }
+      return obj;
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      util.removeClass(this.root, "hide");
+      util.addClass(this.root, "active");
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      util.removeClass(this.root, "active");
+      util.addClass(this.root, "hide");
+    }
+  }, {
+    key: "setStyle",
+    value: function setStyle(style) {
+      var _this2 = this;
+      Object.keys(style).forEach(function(key) {
+        _this2.root.style[key] = style[key];
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this._delegates) {
+        this._delegates.map(function(item) {
+          item.destroy && item.destroy();
+        });
+        this._delegates = null;
+      }
+      this.root.innerHTML = null;
+      this.parent.removeChild(this.root);
+      this.root = null;
+    }
+  }]);
+  return OptionList2;
+}();
+export { OptionList as default };

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

@@ -0,0 +1,40 @@
+export default class OptionsIcon extends Plugin {
+    /**
+     * @type { IOptionsIconConfig }
+     */
+    static get defaultConfig(): IOptionsIconConfig;
+    constructor(args: any);
+    isIcons: boolean;
+    isActive: boolean;
+    curValue: any;
+    curIndex: number;
+    activeEvent: string;
+    initIcons(): void;
+    show(): void;
+    getTextByLang(item: any, key: any, lang: any): any;
+    onEnter: (e: any) => void;
+    switchActiveState: (e: any) => void;
+    onLeave: (e: any) => void;
+    onListEnter: (e: any) => void;
+    enterType: number;
+    onListLeave: (e: any) => void;
+    toggle(isActive: any): void;
+    onItemClick(e: any, data: any): void;
+    curItem: any;
+    onIconClick(e: any): void;
+    changeCurrentText(): void;
+    renderItemList(itemList: any, curIndex: any): void;
+    optionsList: OptionList;
+    _resizeList(): void;
+    render(): string;
+}
+export type IOptionsIconConfig = {
+    [propName: string]: any;
+    isShow?: boolean;
+    index?: number;
+    list?: Array<any>;
+    listType?: string;
+    hidePortrait?: boolean;
+};
+import Plugin from "../../plugin";
+import OptionList from "./optionList";

package/es/plugins/common/optionsIcon.js

@@ -0,0 +1,304 @@
+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 { VIDEO_RESIZE, FULLSCREEN_CHANGE, CANPLAY, PLAYER_FOCUS } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+import OptionList from "./optionList.js";
+var LIST_TYPES = {
+  SIDE: "side",
+  MIDDLE: "middle"
+};
+var TOGGLE_MODES = {
+  CLICK: "click",
+  HOVER: "hover"
+};
+function getListClassName(listType, position) {
+  if (listType === LIST_TYPES.SIDE) {
+    return position === POSITIONS.CONTROLS_LEFT ? "xg-side-list xg-left-side" : "xg-side-list xg-right-side";
+  } else {
+    return "";
+  }
+}
+var IS_MOBILE = sniffer.device === "mobile";
+var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
+  _inherits(OptionsIcon2, _Plugin);
+  var _super = _createSuper(OptionsIcon2);
+  function OptionsIcon2(args) {
+    var _this;
+    _classCallCheck(this, OptionsIcon2);
+    _this = _super.call(this, args);
+    _defineProperty(_assertThisInitialized(_this), "onEnter", function(e) {
+      e.stopPropagation();
+      _this.emit("icon_mouseenter", {
+        pluginName: _this.pluginName
+      });
+      _this.switchActiveState(e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "switchActiveState", function(e) {
+      e.stopPropagation();
+      var toggleMode = _this.config.toggleMode;
+      if (toggleMode === TOGGLE_MODES.CLICK) {
+        _this.toggle(!_this.isActive);
+      } else {
+        _this.toggle(true);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onLeave", function(e) {
+      e.stopPropagation();
+      _this.emit("icon_mouseleave", {
+        pluginName: _this.pluginName
+      });
+      if (_this.config.listType !== LIST_TYPES.SIDE) {
+        _this.isActive && _this.toggle(false);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onListEnter", function(e) {
+      _this.enterType = 2;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onListLeave", function(e) {
+      _this.enterType = 0;
+      _this.isActive && _this.toggle(false);
+    });
+    _this.isIcons = false;
+    _this.isActive = false;
+    _this.curValue = null;
+    _this.curIndex = 0;
+    return _this;
+  }
+  _createClass(OptionsIcon2, [{
+    key: "updateLang",
+    value: function updateLang(value) {
+      this.renderItemList(this.config.list, this.curIndex);
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      var config = this.config;
+      this.initIcons();
+      if (IS_MOBILE && config.listType !== LIST_TYPES.MIDDLE) {
+        config.listType = LIST_TYPES.SIDE;
+      }
+      config.hidePortrait && util.addClass(this.root, "portrait");
+      this.on([VIDEO_RESIZE, FULLSCREEN_CHANGE], function() {
+        _this2._resizeList();
+      });
+      this.once(CANPLAY, function() {
+        if (config.list && config.list.length > 0) {
+          _this2.renderItemList(config.list);
+          _this2.show();
+        }
+      });
+      IS_MOBILE && this.on(PLAYER_FOCUS, function() {
+        if (!_this2.isActive) {
+          return;
+        }
+        _this2.optionsList && _this2.optionsList.hide();
+        _this2.isActive = false;
+      });
+      if (IS_MOBILE) {
+        config.toggleMode = TOGGLE_MODES.CLICK;
+        this.activeEvent = "touchend";
+      } else {
+        this.activeEvent = config.toggleMode === TOGGLE_MODES.CLICK ? "click" : "mouseenter";
+      }
+      if (config.toggleMode === TOGGLE_MODES.CLICK) {
+        this.bind(this.activeEvent, this.switchActiveState);
+      } else {
+        this.bind(this.activeEvent, this.onEnter);
+        this.bind("mouseleave", this.onLeave);
+      }
+      this.isIcons && this.bind("click", this.onIconClick);
+    }
+  }, {
+    key: "initIcons",
+    value: function initIcons() {
+      var _this3 = this;
+      var icons = this.icons;
+      var _c = Object.keys(icons);
+      var _isIcons = false;
+      if (_c.length > 0) {
+        _c.forEach(function(key) {
+          _this3.appendChild(".xgplayer-icon", icons[key]);
+          !_isIcons && (_isIcons = icons[key]);
+        });
+        this.isIcons = _isIcons;
+      }
+      if (_isIcons) {
+        return;
+      }
+      this.appendChild(".xgplayer-icon", util.createDom("span", "", {}, "icon-text"));
+      util.addClass(this.find(".xgplayer-icon"), "btn-text");
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (!this.config.list || this.config.list.length < 2) {
+        return;
+      }
+      util.addClass(this.root, "show");
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      util.removeClass(this.root, "show");
+    }
+  }, {
+    key: "getTextByLang",
+    value: function getTextByLang(item, key, lang) {
+      if (item === void 0) {
+        return "";
+      }
+      var list = this.config.list;
+      !lang && (lang = this.player.lang);
+      key = !key || util.isUndefined(item[key]) ? "text" : key;
+      typeof item === "number" && (item = list[item]);
+      try {
+        if (_typeof(item[key]) === "object") {
+          return item[key][lang] || item[key].en;
+        } else {
+          return item[key];
+        }
+      } catch (err) {
+        console.warn(err);
+        return "";
+      }
+    }
+  }, {
+    key: "toggle",
+    value: function toggle(isActive) {
+      if (isActive === this.isActive)
+        return;
+      var controls = this.player.controls;
+      var listType = this.config.listType;
+      if (isActive) {
+        listType === LIST_TYPES.SIDE ? controls.blur() : controls.focus();
+        this.optionsList && this.optionsList.show();
+      } else {
+        listType === LIST_TYPES.SIDE ? controls.focus() : controls.focusAwhile();
+        this.optionsList && this.optionsList.hide();
+      }
+      this.isActive = isActive;
+    }
+  }, {
+    key: "onItemClick",
+    value: function onItemClick(e, data) {
+      e.stopPropagation();
+      var _this$config = this.config, listType = _this$config.listType, list = _this$config.list;
+      this.curIndex = data.to.index;
+      this.curItem = list[this.curIndex];
+      this.changeCurrentText();
+      var isItemClickHide = this.config.isItemClickHide;
+      (isItemClickHide || IS_MOBILE || listType === LIST_TYPES.SIDE) && this.toggle(false);
+    }
+  }, {
+    key: "onIconClick",
+    value: function onIconClick(e) {
+    }
+  }, {
+    key: "changeCurrentText",
+    value: function changeCurrentText() {
+      if (this.isIcons) {
+        return;
+      }
+      var list = this.config.list;
+      var index = this.curIndex < list.length ? this.curIndex : 0;
+      var curItem = list[index];
+      if (!curItem)
+        return;
+      this.find(".icon-text").innerHTML = this.getTextByLang(curItem, "iconText");
+    }
+  }, {
+    key: "renderItemList",
+    value: function renderItemList(itemList, curIndex) {
+      var _this4 = this;
+      var config = this.config, optionsList = this.optionsList, player = this.player;
+      if (typeof curIndex === "number") {
+        this.curIndex = curIndex;
+        this.curItem = config.list[curIndex];
+      }
+      if (optionsList) {
+        optionsList.renderItemList(itemList);
+        this.changeCurrentText();
+        return;
+      }
+      var options = {
+        config: {
+          data: itemList || [],
+          className: getListClassName(config.listType, config.position),
+          onItemClick: function onItemClick(e, data) {
+            _this4.onItemClick(e, data);
+          }
+        },
+        root: config.listType === LIST_TYPES.SIDE ? player.innerContainer || player.root : this.root
+      };
+      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) {
+          options.config.maxHeight = "".concat(_maxH, "px");
+        }
+        this.optionsList = new OptionList(options);
+        this.changeCurrentText();
+        this.show();
+      }
+      this._resizeList();
+    }
+  }, {
+    key: "_resizeList",
+    value: function _resizeList() {
+      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({
+        maxHeight: "".concat(_maxH, "px")
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var config = this.config;
+      if (config.toggleMode === TOGGLE_MODES.CLICK) {
+        this.unbind(this.activeEvent, this.switchActiveState);
+      } else {
+        this.unbind(this.activeEvent, this.onEnter);
+        this.unbind("mouseleave", this.onLeave);
+      }
+      this.isIcons && this.unbind("click", this.onIconClick);
+      if (this.optionsList) {
+        this.optionsList.destroy();
+        this.optionsList = null;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.config.isShowIcon) {
+        return;
+      }
+      return '<xg-icon class="xg-options-icon '.concat(this.config.className || "", '">\n    <div class="xgplayer-icon">\n    </div>\n   </xg-icon>');
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "optionsIcon";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 100,
+        list: [],
+        listType: "middle",
+        listStyle: {},
+        hidePortrait: true,
+        isShowIcon: false,
+        isItemClickHide: true,
+        toggleMode: TOGGLE_MODES.HOVER
+      };
+    }
+  }]);
+  return OptionsIcon2;
+}(Plugin);
+export { OptionsIcon as default };

package/es/plugins/common/optionsIcon.scss

@@ -0,0 +1,154 @@
+@import "../../style/variable";
+.xgplayer {
+  .xg-options-icon {
+    display: none;
+    cursor: pointer;
+    &.show {
+      display: block;
+    }
+  }
+  
+  @keyframes xg_right_options_active {
+    0% {
+      transform: translateX(50%);
+    }
+    100% {
+      transform: translateX(-50%);
+    }
+  }
+
+  @keyframes xg_right_options_hide {
+    0% {
+      transform: translateX(-50%);
+    }
+    100% {
+      transform: translateX(50%);
+    }
+  }
+
+  @keyframes xg_left_options_active {
+    0% {
+      transform: translateX(-50%);
+    }
+    100% {
+      transform: translateX(50%);
+    }
+  }
+
+  @keyframes xg_left_options_hide {
+    0% {
+      transform: translateX(50%);
+    }
+    100% {
+      transform: translateX(-50%);
+    }
+  }
+
+  .xg-options-list {
+    display: none;
+    position: absolute;
+    z-index: 5;
+    width: 78px;
+    right: 50%;
+    bottom: 100%;
+    background: $definitionUlBgColor;
+    border-radius: 1px;
+    transform: translateX(50%);
+    cursor: pointer;
+    overflow: auto;
+    height: 0;
+    opacity: 0.85;
+    font-size: 14px;
+    color: $definitionLiColor;
+    li {
+      height: 20px;
+      line-height: 20px;
+      position: relative;
+      padding: 4px 0;
+      text-align: center;
+      &:hover{
+        color: $definitionLiActiveColor;
+        opacity: 1;
+      }
+      &.selected{
+        color: $definitionLiActiveColor;
+        opacity: 1;
+      }
+    }
+    li:nth-child(1) {
+      position: relative;
+      margin-top: 12px;
+    }
+    li:last-child {
+      position: relative;
+      margin-bottom: 12px;
+    }
+    &:hover {
+      opacity: 1;
+    }
+    &.active {
+      display: block;
+      height: auto;
+    }
+    &.xg-side-list {
+      width: 20%;
+      height: 100%;
+      bottom: 0;
+      background: rgba(0,0,0,0.9);
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      li {
+        flex:1;
+        width: 100%;
+        padding: 0;
+        position: relative;
+        span {
+          display: block;
+          position: relative;
+          top: 50%;
+          transform: translateY(-50%);
+          pointer-events: none;
+        }
+      }
+      li:nth-child(1) {
+        margin-top: 20px;
+      }
+      li:last-child {
+        margin-bottom: 20px;
+      }
+    }
+    &.xg-right-side {
+      right: -10.5%;
+      &.active {
+        height: 100%;
+        animation: xg_right_options_active .2s ease-out forwards;
+      }
+      &.hide {
+        height: 100%;
+        animation: xg_right_options_hide .2s ease-in forwards;
+      }
+    }
+
+    &.xg-left-side {
+      left: -10.5%;
+      transform: translateX(-50%);
+      &.active {
+        height: 100%;
+        animation: xg_left_options_active .2s ease-out forwards;
+      }
+      &.hide {
+        height: 100%;
+        animation: xg_left_options_hide .2s ease-in forwards;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .xgplayer-mobile .xg-options-icon {
+    &.portrait {
+      display: none;
+    }
+  }
+}