xgplayer 2.32.5 → 2.32.6

package/es/plugins/dynamicBg/index.js

@@ -0,0 +1,316 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import sniffer from "../../utils/sniffer.js";
+import { TIME_UPDATE, COMPLETE, EMPTIED, PLAY, PAUSE, LOADED_DATA, LOAD_START } from "../../events.js";
+import XG_DEBUG from "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var MODES = {
+  REAL_TIME: "realtime",
+  FIRST_FRAME: "firstframe",
+  FRAME_RATE: "framerate",
+  POSTER: "poster"
+};
+function nowTime() {
+  try {
+    return parseInt(window.performance.now(), 10);
+  } catch (e) {
+    return new Date().getTime();
+  }
+}
+function checkIsSupportCanvas() {
+  try {
+    var ctx = document.createElement("canvas").getContext;
+    if (ctx) {
+      return true;
+    }
+    return false;
+  } catch (e) {
+    return false;
+  }
+}
+var isSupportCanvas = null;
+var DynamicBg = /* @__PURE__ */ function(_Plugin) {
+  _inherits(DynamicBg2, _Plugin);
+  var _super = _createSuper(DynamicBg2);
+  function DynamicBg2() {
+    var _this;
+    _classCallCheck(this, DynamicBg2);
+    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), "onLoadedData", function(e) {
+      if (!_this.player) {
+        return;
+      }
+      _this._frameCount = _this.config.startFrameCount;
+      _this.renderOnTimeupdate(e);
+      _this.off(TIME_UPDATE, _this.renderOnTimeupdate);
+      _this.on(TIME_UPDATE, _this.renderOnTimeupdate);
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderOnTimeupdate", function(e) {
+      if (_this._frameCount > 0) {
+        _this.renderOnce();
+        _this._frameCount--;
+      } else {
+        _this._isLoaded = true;
+        _this.off(TIME_UPDATE, _this.renderOnTimeupdate);
+        !_this.player.paused && _this._checkIfCanStart() && _this.start();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "start", function() {
+      var video = _this.player.media;
+      var _now = nowTime();
+      var _sVideo = _this.checkVideoIsSupport(video);
+      if (!_sVideo || !_this.canvasCtx) {
+        return;
+      }
+      _this.stop();
+      if (video.videoWidth && video.videoHeight) {
+        _this.videoPI = video.videoHeight > 0 ? parseInt(video.videoWidth / video.videoHeight * 100, 10) : 0;
+        if (_this.config.mode === MODES.REAL_TIME) {
+          video && video.videoWidth && _this.update(_sVideo, _this.videoPI);
+          _this.preTime = _now;
+        } else if (_now - _this.preTime >= _this.interval) {
+          video && video.videoWidth && _this.update(_sVideo, _this.videoPI);
+          _this.preTime = _now;
+        }
+      }
+      _this.frameId = util.requestAnimationFrame(_this.start);
+    });
+    _defineProperty(_assertThisInitialized(_this), "stop", function() {
+      if (_this.frameId) {
+        util.cancelAnimationFrame(_this.frameId);
+        _this.frameId = null;
+      }
+    });
+    return _this;
+  }
+  _createClass(DynamicBg2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      if (this.playerConfig.dynamicBg === true) {
+        this.config.disable = false;
+      }
+      if (!DynamicBg2.isSupport) {
+        this.config.disable = true;
+      }
+      var _this$config = this.config, disable = _this$config.disable, mode = _this$config.mode, frameRate = _this$config.frameRate;
+      if (disable) {
+        return;
+      }
+      this._pos = {
+        width: 0,
+        height: 0,
+        rwidth: 0,
+        rheight: 0,
+        x: 0,
+        y: 0,
+        pi: 0
+      };
+      this.isStart = false;
+      this._isLoaded = false;
+      this.videoPI = 0;
+      this.preTime = 0;
+      this.interval = parseInt(1e3 / frameRate, 10);
+      this.canvas = null;
+      this.canvasCtx = null;
+      this._frameCount = 0;
+      this.once(COMPLETE, function() {
+        if (!_this2.player) {
+          return;
+        }
+        _this2.init();
+        if (!_this2.player.paused) {
+          _this2.start();
+        }
+      });
+      if (mode === MODES.POSTER) {
+        return;
+      }
+      if (mode !== MODES.FIRST_FRAME) {
+        this.on(EMPTIED, function() {
+          _this2.stop();
+        });
+        this.on(PLAY, function() {
+          _this2._checkIfCanStart() && _this2.start();
+        });
+        this.on(PAUSE, function() {
+          _this2.stop();
+        });
+      }
+      this.on(LOADED_DATA, this.onLoadedData);
+      this.on(LOAD_START, function() {
+        _this2._isLoaded = false;
+        _this2.stop();
+      });
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      var player = this.player, config = this.config;
+      this.canvasFilter = DynamicBg2.supportCanvasFilter();
+      try {
+        var parent = !this.config.isInnerRender ? player.root : player.innerContainer || player.root;
+        parent.insertAdjacentHTML("afterbegin", '<div class="xgplayer-dynamic-bg" data-index="'.concat(config.index, '"><canvas>\n        </canvas><xgmask></xgmask></div>'));
+        this.root = parent.children[0];
+        this.canvas = this.find("canvas");
+        if (!this.canvasFilter) {
+          this.canvas.style.filter = config.filter;
+          this.canvas.style.webkitFilter = config.filter;
+        }
+        this.mask = this.find("xgmask");
+        config.addMask && (this.mask.style.background = config.maskBg);
+        this.canvasCtx = this.canvas.getContext("2d");
+        this.renderByPoster();
+      } catch (e) {
+        XG_DEBUG.logError("plugin:DynamicBg", e);
+      }
+    }
+  }, {
+    key: "checkVideoIsSupport",
+    value: function checkVideoIsSupport(video) {
+      if (!video) {
+        return null;
+      }
+      var _tVideo = video && video instanceof window.HTMLVideoElement ? video : video.canvas ? video.canvas : video.flyVideo ? video.flyVideo : null;
+      if (_tVideo && !(sniffer.browser === "safari" && util.isMSE(_tVideo))) {
+        return _tVideo;
+      }
+      var _tagName = _tVideo ? _tVideo.tagName.toLowerCase() : "";
+      if (_tagName === "canvas" || _tagName === "img") {
+        return _tVideo;
+      }
+      return null;
+    }
+  }, {
+    key: "renderByPoster",
+    value: function renderByPoster() {
+      var poster = this.playerConfig.poster;
+      if (poster) {
+        var url = util.typeOf(poster) === "String" ? poster : util.typeOf(poster.poster) === "String" ? poster.poster : null;
+        this.updateImg(url);
+      }
+    }
+  }, {
+    key: "_checkIfCanStart",
+    value: function _checkIfCanStart() {
+      var mode = this.config.mode;
+      return this._isLoaded && mode !== MODES.FIRST_FRAME && mode !== MODES.POSTER;
+    }
+  }, {
+    key: "renderOnce",
+    value: function renderOnce() {
+      var video = this.player.media;
+      if (!video.videoWidth || !video.videoHeight) {
+        return;
+      }
+      this.videoPI = parseInt(video.videoWidth / video.videoHeight * 100, 10);
+      var _sVideo = this.checkVideoIsSupport(video);
+      _sVideo && video.videoWidth && this.update(_sVideo, this.videoPI);
+    }
+  }, {
+    key: "updateImg",
+    value: function updateImg(url) {
+      var _this3 = this;
+      if (!url) {
+        return;
+      }
+      var _this$canvas$getBound = this.canvas.getBoundingClientRect(), width = _this$canvas$getBound.width, height = _this$canvas$getBound.height;
+      var image = new window.Image();
+      image.onload = function() {
+        if (!_this3.canvas || _this3.frameId || _this3.isStart) {
+          return;
+        }
+        _this3.canvas.height = height;
+        _this3.canvas.width = width;
+        var pi = parseInt(width / height * 100, 10);
+        _this3.update(image, pi);
+        image = null;
+      };
+      image.src = url;
+    }
+  }, {
+    key: "update",
+    value: function update(video, sourcePI) {
+      if (!this.canvas || !this.canvasCtx || !sourcePI) {
+        return;
+      }
+      try {
+        var _pos = this._pos, config = this.config;
+        var _this$canvas$getBound2 = this.canvas.getBoundingClientRect(), width = _this$canvas$getBound2.width, height = _this$canvas$getBound2.height;
+        if (width !== _pos.width || height !== _pos.height || _pos.pi !== sourcePI) {
+          var pi = parseInt(width / height * 100, 10);
+          _pos.pi = sourcePI;
+          _pos.width = this.canvas.width = width;
+          _pos.height = this.canvas.height = height;
+          var rheight = height;
+          var rwidth = width;
+          if (pi < sourcePI) {
+            rwidth = parseInt(height * sourcePI / 100, 10);
+          } else if (pi > sourcePI) {
+            rheight = parseInt(width * 100 / sourcePI, 10);
+          }
+          _pos.rwidth = rwidth * config.multiple;
+          _pos.rheight = rheight * config.multiple;
+          _pos.x = (width - _pos.rwidth) / 2;
+          _pos.y = (height - _pos.rheight) / 2;
+        }
+        this.canvasFilter && (this.canvasCtx.filter = config.filter);
+        this.canvasCtx.drawImage(video, _pos.x, _pos.y, _pos.rwidth, _pos.rheight);
+      } catch (e) {
+        XG_DEBUG.logError("plugin:DynamicBg", e);
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.stop();
+      this.canvasCtx = null;
+      this.canvas = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return "";
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "dynamicBg";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        isInnerRender: false,
+        disable: true,
+        index: -1,
+        mode: "framerate",
+        frameRate: 10,
+        filter: "blur(50px)",
+        startFrameCount: 2,
+        addMask: true,
+        multiple: 1.2,
+        maskBg: "rgba(0,0,0,0.7)"
+      };
+    }
+  }, {
+    key: "isSupport",
+    get: function get() {
+      if (typeof isSupportCanvas === "boolean") {
+        return isSupportCanvas;
+      }
+      isSupportCanvas = checkIsSupportCanvas();
+      return isSupportCanvas;
+    }
+  }, {
+    key: "supportCanvasFilter",
+    value: function supportCanvasFilter() {
+      return !(sniffer.browser === "safari" || sniffer.browser === "firefox");
+    }
+  }]);
+  return DynamicBg2;
+}(Plugin);
+export { DynamicBg as default };

package/es/plugins/dynamicBg/index.scss

@@ -0,0 +1,19 @@
+
+.xgplayer-dynamic-bg, .xgplayer-dynamic-bg canvas, .xgplayer-dynamic-bg xgmask, .xgplayer-dynamic-bg xgfilter{
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  // filter: blur(50px);
+  pointer-events: none;
+}
+.xgplayer-dynamic-bg {
+  canvas {
+    transform: translateZ(0);
+  }
+  xgmask {
+    background: rgba(0,0,0,0.7);
+  }
+}

package/es/plugins/enter/index.css

@@ -0,0 +1,104 @@
+.xgplayer-enter {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 5;
+  pointer-events: none;
+}
+.xgplayer-enter .show {
+  display: block;
+}
+.xgplayer-enter .xgplayer-enter-spinner {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  top: 50%;
+  height: 100px;
+  width: 100px;
+  transform: translate(-50%, -50%);
+}
+.xgplayer-enter .xgplayer-enter-spinner div {
+  width: 6%;
+  height: 13%;
+  background-color: rgba(255, 255, 255, 0.7);
+  position: absolute;
+  left: 45%;
+  top: 45%;
+  opacity: 0;
+  border-radius: 30px;
+  animation: fade 1s linear infinite;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar1 {
+  transform: rotate(0deg) translate(0, -140%);
+  animation-delay: -0s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar2 {
+  transform: rotate(30deg) translate(0, -140%);
+  animation-delay: -0.9163s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar3 {
+  transform: rotate(60deg) translate(0, -140%);
+  animation-delay: -0.833s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar4 {
+  transform: rotate(90deg) translate(0, -140%);
+  animation-delay: -0.7497s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar5 {
+  transform: rotate(120deg) translate(0, -140%);
+  animation-delay: -0.6664s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar6 {
+  transform: rotate(150deg) translate(0, -140%);
+  animation-delay: -0.5831s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar7 {
+  transform: rotate(180deg) translate(0, -140%);
+  animation-delay: -0.4998s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar8 {
+  transform: rotate(210deg) translate(0, -140%);
+  animation-delay: -0.4165s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar9 {
+  transform: rotate(240deg) translate(0, -140%);
+  animation-delay: -0.3332s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar10 {
+  transform: rotate(270deg) translate(0, -140%);
+  animation-delay: -0.2499s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar11 {
+  transform: rotate(300deg) translate(0, -140%);
+  animation-delay: -0.1666s;
+}
+.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar12 {
+  transform: rotate(330deg) translate(0, -142%);
+  animation-delay: -0.0833s;
+}
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}
+
+.xgplayer.xgplayer-is-enter .xgplayer-enter {
+  display: block;
+  opacity: 1;
+  transition: opacity 0.3s;
+}
+.xgplayer.xgplayer-nostart .xgplayer-enter {
+  display: none;
+}
+.xgplayer.xgplayer-mobile .xgplayer-enter .xgplayer-enter-spinner {
+  width: 70px;
+  height: 70px;
+}

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

@@ -0,0 +1,19 @@
+export default Enter;
+export type IEnterConfig = {
+    [propName: string]: any;
+    innerHtml?: string;
+};
+/**
+  * @typedef { {
+  *   innerHtml?: string,
+  *   [propName: string]: any
+  * } } IEnterConfig
+  */
+declare class Enter extends Plugin {
+    /**
+     * @type IEnterConfig
+     */
+    static get defaultConfig(): IEnterConfig;
+    render(): HTMLElement;
+}
+import Plugin from "../../plugin";

package/es/plugins/enter/index.js

@@ -0,0 +1,46 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var Enter = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Enter2, _Plugin);
+  var _super = _createSuper(Enter2);
+  function Enter2() {
+    _classCallCheck(this, Enter2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Enter2, [{
+    key: "render",
+    value: function render() {
+      var innerHtml = this.config.innerHtml;
+      var root = util.createDom("xg-enter", "", {}, "xgplayer-enter");
+      if (innerHtml && innerHtml instanceof window.HTMLElement) {
+        root.appendChild(innerHtml);
+      } else if (innerHtml && typeof innerHtml === "string") {
+        root.innerHTML = innerHtml;
+      } else {
+        var barStr = "";
+        for (var i = 1; i <= 12; i++) {
+          barStr += '<div class="xgplayer-enter-bar'.concat(i, '"></div>');
+        }
+        root.innerHTML = '<div class="xgplayer-enter-spinner">'.concat(barStr, "</div>");
+      }
+      return root;
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "enter";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        innerHtml: "",
+        logo: ""
+      };
+    }
+  }]);
+  return Enter2;
+}(Plugin);
+export { Enter as default };

package/es/plugins/enter/index.scss

@@ -0,0 +1,78 @@
+.xgplayer-enter {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.8);
+  z-index: 5;
+  pointer-events: none;
+  .show {
+    display: block;
+  }
+  .xgplayer-enter-spinner {
+    display: block;
+    position: absolute;
+    z-index: 1;
+    left: 50%;
+    top: 50%;
+    height: 100px;
+    width: 100px;
+    transform: translate(-50%,-50%);
+  }
+
+  .xgplayer-enter-spinner div {
+    width: 6%;
+    height: 13%;
+    background-color: rgba(255,255,255,0.7);
+    position: absolute;
+    left: 45%;
+    top: 45%;
+    opacity: 0;
+    border-radius: 30px;
+    animation: fade 1s linear infinite;
+  }
+
+  @for $i from 1 to 12 {
+    .xgplayer-enter-spinner div.xgplayer-enter-bar#{$i} {
+      transform: rotate(#{($i - 1) * 30 }deg) translate(0, -140%);
+      animation-delay: -#{(13 - $i)%12 * 0.0833}s;
+    }
+  }
+  .xgplayer-enter-spinner div.xgplayer-enter-bar12 {
+    transform:rotate(330deg) translate(0, -142%);
+    animation-delay: -0.0833s;
+  }
+  @keyframes fade {
+    from {opacity: 1;}
+    to {opacity: 0.25;}
+  }
+}
+
+.xgplayer {
+  &.xgplayer-is-enter {
+    .xgplayer-enter {
+      display: block;
+      opacity: 1;
+      transition: opacity 0.3s;
+    }
+  }
+  &.xgplayer-nostart {
+    .xgplayer-enter {
+      display: none;
+    }
+  }
+  &.xgplayer-mobile {
+    .xgplayer-enter .xgplayer-enter-spinner {
+      width: 70px;
+      height: 70px;
+    }
+  }
+}
+
+// .not-allow-autoplay, .xgplayer-playing, .xgplayer-nostart{
+//   .xgplayer-enter {
+//     display: none;
+//   }
+// }

package/es/plugins/error/index.css

@@ -0,0 +1,29 @@
+.xgplayer-error {
+  background: #000;
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 6;
+  color: #fff;
+  text-align: center;
+  line-height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.xgplayer-error .xgplayer-error-refresh {
+  color: #FA1F41;
+  padding: 0 3px;
+  cursor: pointer;
+}
+.xgplayer-error .xgplayer-error-text {
+  line-height: 18px;
+  margin: auto 6px;
+  display: block;
+  margin-bottom: 20px;
+}
+.xgplayer-is-error .xgplayer-error {
+  display: flex;
+}

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

@@ -0,0 +1,8 @@
+export default class ErrorPlugin extends Plugin {
+    clickHandler: any;
+    onError: any;
+    errorRetry(e: any): void;
+    handleError(error?: {}): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/error/index.js

@@ -0,0 +1,75 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
+import { ERROR } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var ErrorPlugin = /* @__PURE__ */ function(_Plugin) {
+  _inherits(ErrorPlugin2, _Plugin);
+  var _super = _createSuper(ErrorPlugin2);
+  function ErrorPlugin2() {
+    _classCallCheck(this, ErrorPlugin2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(ErrorPlugin2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      this.clickHandler = this.hook("errorRetry", this.errorRetry, {
+        pre: function pre(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      });
+      this.onError = this.hook("showError", this.handleError);
+      this.bind(".xgplayer-error-refresh", "click", this.clickHandler);
+      this.on(ERROR, function(error) {
+        _this.onError(error);
+      });
+    }
+  }, {
+    key: "errorRetry",
+    value: function errorRetry(e) {
+      this.emitUserAction(e, "error_retry", {});
+      this.player.retry();
+    }
+  }, {
+    key: "handleError",
+    value: function handleError() {
+      var error = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      var player = this.player;
+      var type = error.errorType;
+      var errorNote = player.errorNote ? this.i18n[player.errorNote] : "";
+      if (!errorNote) {
+        switch (type) {
+          case "decoder":
+            errorNote = this.i18n.MEDIA_ERR_DECODE;
+            break;
+          case "network":
+            errorNote = this.i18n.MEDIA_ERR_NETWORK;
+            break;
+          default:
+            errorNote = this.i18n.MEDIA_ERR_SRC_NOT_SUPPORTED;
+        }
+      }
+      this.find(".xgplayer-error-text").innerHTML = errorNote;
+      this.find(".xgplayer-error-tips").innerHTML = "".concat(this.i18n.REFRESH_TIPS, '<span class="xgplayer-error-refresh">').concat(this.i18n.REFRESH, "</span>");
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind(".xgplayer-error-refresh", "click", this.clickHandler);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return '<xg-error class="xgplayer-error">\n      <div class="xgplayer-errornote">\n       <span class="xgplayer-error-text"></span>\n       <span class="xgplayer-error-tips"><em class="xgplayer-error-refresh"></em></span>\n      </div>\n    </xg-error>';
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "error";
+    }
+  }]);
+  return ErrorPlugin2;
+}(Plugin);
+export { ErrorPlugin as default };