xgplayer 2.32.5 → 2.32.6

package/es/plugins/playbackRate/index.js

@@ -0,0 +1,140 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectSpread2 as _objectSpread2, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
+import { RATE_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
+import { POSITIONS } from "../../plugin/plugin.js";
+import OptionsIcon from "../common/optionsIcon.js";
+var PlaybackRate = /* @__PURE__ */ function(_OptionsIcon) {
+  _inherits(PlaybackRate2, _OptionsIcon);
+  var _super = _createSuper(PlaybackRate2);
+  function PlaybackRate2(args) {
+    var _this;
+    _classCallCheck(this, PlaybackRate2);
+    _this = _super.call(this, args);
+    _this.curRate = 1;
+    return _this;
+  }
+  _createClass(PlaybackRate2, [{
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      var playbackRate = args.player.config.playbackRate;
+      var list = !playbackRate ? [] : Array.isArray(playbackRate) ? playbackRate : args.config.list;
+      if (Array.isArray(list)) {
+        args.config.list = list.map(function(item) {
+          if (typeof item === "number") {
+            item = {
+              rate: item,
+              text: "".concat(item, "x")
+            };
+          } else if (!item.text && item.rate) {
+            item.text = "".concat(item.rate, "x");
+          }
+          return item;
+        });
+      }
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      _get(_getPrototypeOf(PlaybackRate2.prototype), "afterCreate", this).call(this);
+      this.on(RATE_CHANGE, function() {
+        if (_this2.curValue === _this2.player.playbackRate) {
+          return;
+        }
+        _this2.renderItemList();
+      });
+      this.renderItemList();
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (!this.config.list || this.config.list.length === 0) {
+        return;
+      }
+      _get(_getPrototypeOf(PlaybackRate2.prototype), "show", this).call(this);
+    }
+  }, {
+    key: "onItemClick",
+    value: function onItemClick(e, data) {
+      _get(_getPrototypeOf(PlaybackRate2.prototype), "onItemClick", this).apply(this, arguments);
+      var target = e.delegateTarget;
+      var rate = Number(target.getAttribute("rate"));
+      if (!rate || rate === this.curValue) {
+        return false;
+      }
+      var props = {
+        playbackRate: {
+          from: this.player.playbackRate,
+          to: rate
+        }
+      };
+      this.emitUserAction(e, "change_rate", {
+        props
+      });
+      this.curValue = rate;
+      this.player.playbackRate = rate;
+    }
+  }, {
+    key: "renderItemList",
+    value: function renderItemList() {
+      var _this3 = this;
+      var playbackRate = this.player.playbackRate || 1;
+      this.curValue = playbackRate;
+      var curIndex = -1;
+      var items = this.config.list.map(function(item, index) {
+        var itemInfo = {
+          rate: item.rate
+        };
+        if (itemInfo.rate === playbackRate) {
+          itemInfo.selected = true;
+          curIndex = index;
+        }
+        itemInfo.showText = _this3.getTextByLang(item);
+        return itemInfo;
+      });
+      _get(_getPrototypeOf(PlaybackRate2.prototype), "renderItemList", this).call(this, items, curIndex);
+    }
+  }, {
+    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];
+      var _text = "";
+      if (!curItem || this.curIndex < 0) {
+        _text = "".concat(this.player.playbackRate, "x");
+      } else {
+        _text = this.getTextByLang(curItem, "iconText");
+      }
+      this.find(".icon-text").innerHTML = _text;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      _get(_getPrototypeOf(PlaybackRate2.prototype), "destroy", this).call(this);
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "playbackRate";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return _objectSpread2(_objectSpread2({}, OptionsIcon.defaultConfig), {}, {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 4,
+        list: [2, 1.5, 1, 0.75, 0.5],
+        className: "xgplayer-playbackrate",
+        isShowIcon: true,
+        hidePortrait: false
+      });
+    }
+  }]);
+  return PlaybackRate2;
+}(OptionsIcon);
+export { PlaybackRate as default };

package/es/plugins/playbackRate/index.scss

@@ -0,0 +1,6 @@
+.xgplayer {
+  .xgplayer-playbackrate {
+    display: none;
+    cursor: default;
+  }
+}

package/es/plugins/poster/index.css

@@ -0,0 +1,39 @@
+.xgplayer .xgplayer-poster {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center center;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  pointer-events: none;
+}
+.xgplayer .xgplayer-poster.hide {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.xgplayer.xgplayer-playing .xgplayer-poster {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.xgplayer.xgplayer-is-enter .xgplayer-poster.xg-showplay, .xgplayer.xgplayer-playing .xgplayer-poster.xg-showplay {
+  opacity: 1;
+  visibility: visible;
+}
+
+.xgplayer.xgplayer-nostart .xgplayer-poster, .xgplayer.xgplayer-ended .xgplayer-poster, .xgplayer.not-allow-autoplay .xgplayer-poster {
+  opacity: 1;
+  visibility: visible;
+}
+.xgplayer.xgplayer-nostart .xgplayer-poster.hide, .xgplayer.xgplayer-ended .xgplayer-poster.hide, .xgplayer.not-allow-autoplay .xgplayer-poster.hide {
+  opacity: 0;
+  visibility: hidden;
+}

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

@@ -0,0 +1,27 @@
+export default Poster;
+export type IPosterConfig = {
+    isEndedShow?: boolean;
+    hideCanplay?: boolean;
+    poster?: string;
+};
+/**
+ * @typedef {{
+ *   isEndedShow?: boolean, // 是否在播放结束之后显示
+ *   hideCanplay?: boolean, // cnaplay 时间大于1的时候才隐藏
+ *   poster?: string // 封面图地址
+ * }} IPosterConfig
+ */
+declare class Poster extends Plugin {
+    /**
+     * @type IPosterConfig
+     */
+    static get defaultConfig(): IPosterConfig;
+    set isEndedShow(arg: any);
+    get isEndedShow(): any;
+    show(): void;
+    beforeCreate(args: any): void;
+    onTimeUpdate(): void;
+    update(poster: any): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/poster/index.js

@@ -0,0 +1,109 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import { ENDED, TIME_UPDATE, URL_CHANGE, PLAY } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var Poster = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Poster2, _Plugin);
+  var _super = _createSuper(Poster2);
+  function Poster2() {
+    _classCallCheck(this, Poster2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Poster2, [{
+    key: "isEndedShow",
+    get: function get() {
+      return this.config.isEndedShow;
+    },
+    set: function set(value) {
+      this.config.isEndedShow = value;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      util.addClass(this.root, "hide");
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      util.removeClass(this.root, "hide");
+    }
+  }, {
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      if (typeof args.player.config.poster === "string") {
+        args.config.poster = args.player.config.poster;
+      }
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      this.on(ENDED, function() {
+        if (_this.isEndedShow) {
+          util.removeClass(_this.root, "hide");
+        }
+      });
+      if (this.config.hideCanplay) {
+        this.once(TIME_UPDATE, function() {
+          _this.onTimeUpdate();
+        });
+        this.on(URL_CHANGE, function() {
+          util.removeClass(_this.root, "hide");
+          util.addClass(_this.root, "xg-showplay");
+          _this.once(TIME_UPDATE, function() {
+            _this.onTimeUpdate();
+          });
+        });
+      } else {
+        this.on(PLAY, function() {
+          util.addClass(_this.root, "hide");
+        });
+      }
+    }
+  }, {
+    key: "onTimeUpdate",
+    value: function onTimeUpdate() {
+      var _this2 = this;
+      if (!this.player.currentTime) {
+        this.once(TIME_UPDATE, function() {
+          _this2.onTimeUpdate();
+        });
+      } else {
+        util.removeClass(this.root, "xg-showplay");
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(poster) {
+      if (!poster) {
+        return;
+      }
+      this.config.poster = poster;
+      this.root.style.backgroundImage = "url(".concat(poster, ")");
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$config = this.config, poster = _this$config.poster, hideCanplay = _this$config.hideCanplay;
+      var style = poster ? "background-image:url(".concat(poster, ");") : "";
+      return '<xg-poster class="xgplayer-poster '.concat(hideCanplay ? "xg-showplay" : "", '" style="').concat(style, '">\n    </xg-poster>');
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "poster";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        isEndedShow: true,
+        hideCanplay: false,
+        poster: ""
+      };
+    }
+  }]);
+  return Poster2;
+}(Plugin);
+export { Poster as default };

package/es/plugins/poster/index.scss

@@ -0,0 +1,56 @@
+.xgplayer {
+  .xgplayer-poster {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    transition: opacity .3s ease,visibility .3s ease;
+    pointer-events: none;
+    &.hide {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}
+
+.xgplayer.xgplayer-playing {
+  .xgplayer-poster {
+    // display: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.xgplayer {
+  &.xgplayer-is-enter, &.xgplayer-playing {
+    .xgplayer-poster.xg-showplay {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+.xgplayer {
+  &.xgplayer-nostart, 
+  &.xgplayer-ended,
+  &.not-allow-autoplay {
+    .xgplayer-poster {
+      // display: block;
+      opacity: 1;
+      visibility: visible;
+      &.hide {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+}
+

package/es/plugins/progress/index.css

@@ -0,0 +1,234 @@
+@charset "UTF-8";
+.xgplayer {
+  /* 滑块样式 */
+  /* 进度条打点*/
+}
+.xgplayer .xgplayer-progress {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-width: 50px;
+  height: 12px;
+  left: 0;
+  right: 0;
+  top: 0;
+  outline: none;
+  flex: 1;
+  cursor: pointer;
+}
+.xgplayer .xgplayer-progress-outer {
+  position: relative;
+  width: 100%;
+  height: 2px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.xgplayer .progress-list {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+}
+.xgplayer .xgplayer-progress-inner {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.3);
+  transition: height 0.2s ease-in, opacity 0.2s ease-out;
+  border-radius: inherit;
+  margin-right: 2px;
+  pointer-events: none;
+}
+.xgplayer .xgplayer-progress-inner:last-child, .xgplayer .xgplayer-progress-inner:only-child {
+  margin-right: 0;
+}
+.xgplayer .inner-focus-point {
+  background: #fff;
+  position: relative;
+}
+.xgplayer .inner-focus-point:before, .xgplayer .inner-focus-point:after {
+  position: absolute;
+  top: 0;
+  content: " ";
+  display: block;
+  width: 2px;
+  height: 300%;
+  top: 50%;
+  z-index: 1;
+  transform: translateY(-50%);
+  border-radius: 3px;
+  background: #fff;
+}
+.xgplayer .inner-focus-point:before {
+  left: 0;
+}
+.xgplayer .inner-focus-point:after {
+  right: 0;
+}
+.xgplayer .xgplayer-progress-cache, .xgplayer .xgplayer-progress-played {
+  display: block;
+  height: 100%;
+  width: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+}
+.xgplayer .xgplayer-progress-played {
+  background: linear-gradient(-90deg, #FA1F41 0%, #E31106 100%);
+}
+.xgplayer .xgplayer-progress-cache {
+  background: rgba(255, 255, 255, 0.5);
+}
+.xgplayer .xgplayer-progress-btn {
+  display: block;
+  background: rgba(255, 94, 94, 0.304093);
+  border: 0.5px solid rgba(255, 94, 94, 0.056545);
+  box-shadow: 0px 0px 1px rgba(255, 0, 0, 0.382897);
+  width: 20px;
+  height: 20px;
+  border-radius: 30px;
+  left: 0;
+  top: 50%;
+  position: absolute;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.xgplayer .xgplayer-progress-btn:before {
+  content: " ";
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 12px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 30px;
+  background: #FFFFFF;
+}
+.xgplayer .xgplayer-progress-btn.active {
+  border: 4px solid rgba(255, 94, 94, 0.064057);
+}
+.xgplayer .xgplayer-progress-btn.active:before {
+  box-shadow: 0px 0px 3px rgba(248, 89, 89, 0.689);
+}
+.xgplayer .xgplayer-progress-dot {
+  display: inline-block;
+  position: absolute;
+  height: 100%;
+  width: 5px;
+  top: 0px;
+  background: white;
+  border-radius: 6px;
+  z-index: 16;
+}
+.xgplayer .xgplayer-progress-dot .xgplayer-progress-tip {
+  position: absolute;
+  left: 25%;
+  top: -40px;
+  height: auto;
+  line-height: 30px;
+  width: auto;
+  transform: scale(0.8) translateX(-50%);
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.8);
+  cursor: default;
+  white-space: nowrap;
+  display: none;
+}
+.xgplayer .xgplayer-progress-dot:hover .xgplayer-progress-tip {
+  display: block;
+}
+.xgplayer .flex-controls .xgplayer-progress {
+  transform: translateY(0);
+}
+.xgplayer.xgplayer-pc .xgplayer-progress-btn {
+  transform: translate(-50%, -50%) scale(0);
+}
+.xgplayer.xgplayer-pc .xgplayer-progress-outer {
+  height: 3px;
+}
+.xgplayer.xgplayer-pc .xgplayer-progress-inner {
+  margin-right: 4px;
+}
+.xgplayer.xgplayer-pc .xgplayer-progress-inner:last-child, .xgplayer.xgplayer-pc .xgplayer-progress-inner:only-child {
+  margin-right: 0;
+}
+.xgplayer.xgplayer-pc .inner-focus-point:before, .xgplayer.xgplayer-pc .inner-focus-point:after {
+  width: 3px;
+}
+.xgplayer.xgplayer-pc .inner-focus-highlight {
+  background: rgba(255, 255, 255, 0.8);
+}
+.xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-outer {
+  height: 6px;
+  margin-bottom: 3px;
+  transition: height 0.3s ease, margin-bottom 0.3s ease;
+}
+.xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-btn {
+  transform: translate(-50%, -50%) scale(1);
+}
+.xgplayer.xgplayer-pc .xgplayer-progress.active .inner-focus-point:before, .xgplayer.xgplayer-pc .xgplayer-progress.active .inner-focus-point:after {
+  width: 6px;
+}
+.xgplayer .xgplayer-progress-bottom .xgplayer-progress-outer {
+  top: 9px;
+}
+.xgplayer .xgplayer-progress-bottom .xgplayer-progress-btn:before {
+  height: 6px;
+  width: 6px;
+}
+.xgplayer.xgplayer-mobile .xgplayer-progress-bottom .xgplayer-progress-outer {
+  height: 4px;
+}
+@media (prefers-color-scheme: dark) {
+  .xgplayer .xgplayer-progress .xgplayer-progress-inner {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  .xgplayer .xgplayer-progress .inner-focus-highlight {
+    background: rgba(255, 255, 255, 0.8);
+  }
+  .xgplayer .xgplayer-progress .xgplayer-progress-btn {
+    background: rgba(255, 94, 94, 0.304093);
+    border: 0.5px solid rgba(255, 94, 94, 0.056545);
+    box-shadow: 0px 0px 1px rgba(255, 0, 0, 0.382897);
+  }
+  .xgplayer .xgplayer-progress .xgplayer-progress-btn:before {
+    background-color: #fff;
+  }
+  .xgplayer .xgplayer-progress .xgplayer-progress-played {
+    background-color: linear-gradient(-90deg, #FA1F41 0%, #E31106 100%);
+  }
+  .xgplayer .xgplayer-progress .xgplayer-progress-cache {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+.xg-mini-progress {
+  display: none;
+  position: absolute;
+  height: 2px;
+  left: 0;
+  right: 0;
+  bottom: 0px;
+  pointer-events: none;
+}
+.xg-mini-progress xg-mini-progress-played, .xg-mini-progress xg-mini-progress-cache {
+  height: 100%;
+  width: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+}
+.xg-mini-progress xg-mini-progress-played {
+  background: linear-gradient(-90deg, #FA1F41 0%, #E31106 100%);
+}
+.xg-mini-progress xg-mini-progress-cache {
+  background: rgba(255, 255, 255, 0.5);
+}
+.xgplayer-inactive .xg-mini-progress, .xgplayer-mini .xg-mini-progress {
+  display: block;
+}