xgplayer 2.32.5 → 2.32.6

package/es/plugins/prompt/index.css

@@ -0,0 +1,47 @@
+.xgplayer .xgplayer-prompt {
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  padding: 6px 12px 5px;
+  opacity: 0;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50px;
+  font-size: 12px;
+  line-height: 17px;
+  text-align: center;
+  color: #FFF;
+}
+.xgplayer .xgplayer-prompt.show {
+  display: block;
+  opacity: 1;
+  z-index: 10;
+  pointer-events: initial;
+}
+.xgplayer .xgplayer-prompt.arrow {
+  transform: translateX(-50%);
+}
+.xgplayer .xgplayer-prompt.arrow:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 8px solid rgba(0, 0, 0, 0.5);
+  transform: translate(-50%, 100%);
+}
+.xgplayer .xgplayer-prompt .highlight {
+  display: inline-block;
+  margin-left: 6px;
+  color: #FF0000;
+  cursor: pointer;
+}
+.xgplayer.xgplayer-is-error .xgplayer-prompt.show {
+  display: none;
+  opacity: 1;
+}

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

@@ -0,0 +1,24 @@
+export default Prompt;
+/**
+ * 消息组件
+ */
+declare class Prompt extends Plugin {
+    static get defaultConfig(): {
+        interval: number;
+        style: {};
+        mode: string;
+        autoHide: boolean;
+        detail: {
+            text: string;
+            highlight: string;
+        };
+        onClick: () => void;
+    };
+    intervalId: number | NodeJS.Timeout;
+    customConfig: any;
+    setStyle(style: any): void;
+    show(detail: any, config?: {}, onClick?: () => void): void;
+    customOnClick: () => void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/prompt/index.js

@@ -0,0 +1,110 @@
+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";
+import STATE_CLASS from "../../stateClassMap.js";
+var Prompt = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Prompt2, _Plugin);
+  var _super = _createSuper(Prompt2);
+  function Prompt2() {
+    _classCallCheck(this, Prompt2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Prompt2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      this.intervalId = 0;
+      this.customConfig = null;
+      this.bind(".highlight", ["click", "touchend"], function(e) {
+        if (_this.config.onClick || _this.customOnClick) {
+          e.preventDefault();
+          e.stopPropagation();
+          _this.customOnClick ? _this.customOnClick(e) : _this.config.onClick(e);
+        }
+      });
+      this.player.showPrompt = function() {
+        _this.show.apply(_this, arguments);
+      };
+      this.player.hidePrompt = function() {
+        _this.hide();
+      };
+    }
+  }, {
+    key: "setStyle",
+    value: function setStyle(style) {
+      var _this2 = this;
+      Object.keys(style).map(function(key) {
+        _this2.root.style[key] = style[key];
+      });
+    }
+  }, {
+    key: "show",
+    value: function show(detail) {
+      var _this3 = this;
+      var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+      var onClick = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : function() {
+      };
+      if (!detail) {
+        return;
+      }
+      this.customOnClick = onClick;
+      var interval = this.config.interval;
+      if (this.intervalId) {
+        clearTimeout(this.intervalId);
+        this.intervalId = null;
+      }
+      util.addClass(this.root, "show");
+      config.mode === "arrow" && util.addClass(this.root, "arrow");
+      if (typeof detail === "string") {
+        this.find(".xgplayer-prompt-detail").innerHTML = detail;
+      } else {
+        this.find(".xgplayer-prompt-detail").innerHTML = "".concat(detail.text || "") + "".concat(detail.highlight ? '<i class="highlight">'.concat(detail.highlight, "</i>") : "");
+      }
+      config.style && this.setStyle(config.style);
+      var autoHide = typeof config.autoHide === "boolean" ? config.autoHide : this.config.autoHide;
+      if (autoHide) {
+        var hideinterval = config.interval || interval;
+        this.intervalId = setTimeout(function() {
+          _this3.hide();
+        }, hideinterval);
+      }
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      util.removeClass(this.root, "show");
+      util.removeClass(this.root, "arrow");
+      this.root.removeAttribute("style");
+      this.customOnClick = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return '<xg-prompt class="xgplayer-prompt '.concat(STATE_CLASS.CONTROLS_FOLLOW, '">\n    <span class="xgplayer-prompt-detail"></span>\n    </xg-prompt>');
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "prompt";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        interval: 3e3,
+        style: {},
+        mode: "arrow",
+        autoHide: true,
+        detail: {
+          text: "",
+          highlight: ""
+        },
+        onClick: function onClick() {
+        }
+      };
+    }
+  }]);
+  return Prompt2;
+}(Plugin);
+export { Prompt as default };

package/es/plugins/prompt/index.scss

@@ -0,0 +1,53 @@
+.xgplayer {
+  .xgplayer-prompt {
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+    padding: 6px 12px 5px;
+    opacity: 0;
+    left: 10px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50px;
+    font-size: 12px;
+    line-height: 17px;
+    text-align: center;
+    color: #FFF;
+    &.show {
+      display: block;
+      opacity: 1;
+      z-index: 10;
+      pointer-events: initial;
+    }
+    &.arrow {
+      transform: translateX(-50%);
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 8px solid rgba(0, 0, 0, 0.5);
+        transform: translate(-50%, 100%);
+      }
+    }
+    .highlight {
+      display: inline-block;
+      margin-left: 6px;
+      color: #FF0000;
+      cursor: pointer;
+     }
+  }
+
+  // &.xgplayer-ended,
+  &.xgplayer-is-error {
+    .xgplayer-prompt.show {
+      display: none;
+      opacity: 1;
+    }
+  }
+}

package/es/plugins/replay/index.css

@@ -0,0 +1,33 @@
+.xgplayer-replay {
+  display: none;
+}
+
+.xgplayer .xgplayer-replay {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 100px;
+  height: 100px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 5;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+.xgplayer .xgplayer-replay .xgplayer-replay-txt {
+  display: inline-block;
+  font-size: 14px;
+  color: #fff;
+  line-height: 34px;
+  text-align: center;
+}
+.xgplayer.xgplayer-mobile .xgplayer-replay-svg {
+  width: 50px;
+  height: 50px;
+}
+.xgplayer.xgplayer-mobile .xgplayer-replay-txt {
+  line-height: 24px;
+  font-size: 12px;
+}

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

@@ -0,0 +1,16 @@
+export default Replay;
+declare class Replay extends Plugin {
+    static get defaultConfig(): {
+        disable: boolean;
+    };
+    registerIcons(): {
+        replay: any;
+    };
+    __handleReplay: any;
+    handleReplay(e: any): void;
+    show(): void;
+    enable(): void;
+    disable(): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/replay/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, PLAY } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+import ReplaySvg from "../assets/replay.js";
+var Replay = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Replay2, _Plugin);
+  var _super = _createSuper(Replay2);
+  function Replay2() {
+    _classCallCheck(this, Replay2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Replay2, [{
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        replay: ReplaySvg
+      };
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      Plugin.insert(this.icons.replay, this.root, 0);
+      this.__handleReplay = this.hook("replayClick", function() {
+        _this.player.replay();
+      }, {
+        pre: function pre(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      });
+      this.bind(".xgplayer-replay", ["click", "touchend"], this.__handleReplay);
+      this.on(ENDED, function() {
+        if (!_this.playerConfig.loop) {
+          util.addClass(_this.player.root, "replay");
+        }
+        if (_this.config.disable) {
+          return;
+        }
+        _this.show();
+        var path = _this.root.querySelector("path");
+        if (path) {
+          var transform = window.getComputedStyle(path).getPropertyValue("transform");
+          if (typeof transform === "string" && transform.indexOf("none") > -1) {
+            return null;
+          } else {
+            path.setAttribute("transform", transform);
+          }
+        }
+      });
+      this.on(PLAY, function() {
+        _this.hide();
+      });
+    }
+  }, {
+    key: "handleReplay",
+    value: function handleReplay(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.player.replay();
+      util.removeClass(this.player.root, "replay");
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.config.disable) {
+        return;
+      }
+      this.root.style.display = "flex";
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.config.disable = false;
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.config.disable = true;
+      this.hide();
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind(".xgplayer-replay", ["click", "touchend"], this.__handleReplay);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return '<xg-replay class="xgplayer-replay">\n      <xg-replay-txt class="xgplayer-replay-txt" lang-key="'.concat(this.i18nKeys.REPLAY, '">').concat(this.i18n.REPLAY, "</xg-replay-txt>\n    </xg-replay>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "replay";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        disable: false
+      };
+    }
+  }]);
+  return Replay2;
+}(Plugin);
+export { Replay as default };

package/es/plugins/replay/index.scss

@@ -0,0 +1,41 @@
+.xgplayer-replay {
+  display: none;
+}
+.xgplayer {
+  .xgplayer-replay {
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 100px;
+    height: 100px;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 5;
+    transform: translate(-50%, -50%);
+    // background: rgba(0,0,0,0.38);
+    cursor: pointer;
+    // &:hover{
+    //   background: rgba(0, 0, 0, .58);
+    // }
+    .xgplayer-replay-txt{
+      display: inline-block;
+      font-size: 14px;
+      color: #fff;
+      line-height: 34px;
+      text-align: center;
+    }
+  }
+  &.xgplayer-mobile {
+    .xgplayer-replay-svg {
+      width: 50px;
+      height: 50px;
+    }
+    .xgplayer-replay-txt {
+      line-height: 24px;
+      font-size: 12px;
+    }
+  }
+}
+

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

@@ -0,0 +1,22 @@
+export default class Rotate extends IconPlugin {
+    static get defaultConfig(): {
+        position: string;
+        index: number;
+        innerRotate: boolean;
+        clockwise: boolean;
+        rotateDeg: number;
+        disable: boolean;
+    };
+    constructor(args: any);
+    rotateDeg: any;
+    onBtnClick(e: any): void;
+    rootWidth: string | number;
+    rootHeight: string | number;
+    updateRotateDeg(rotateDeg: any, innerRotate: any): void;
+    rotate(clockwise?: boolean, innerRotate?: boolean, times?: number): void;
+    registerIcons(): {
+        rotate: any;
+    };
+    render(): string;
+}
+import IconPlugin from "../common/iconPlugin";

package/es/plugins/rotate/index.js

@@ -0,0 +1,148 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import { VIDEO_RESIZE, ROTATE } from "../../events.js";
+import "../../utils/debug.js";
+import { POSITIONS } from "../../plugin/plugin.js";
+import { xgIconTips } from "../common/iconTools.js";
+import Icon from "../common/iconPlugin.js";
+import RotateSvg from "../assets/rotate.js";
+var Rotate = /* @__PURE__ */ function(_IconPlugin) {
+  _inherits(Rotate2, _IconPlugin);
+  var _super = _createSuper(Rotate2);
+  function Rotate2(args) {
+    var _this;
+    _classCallCheck(this, Rotate2);
+    _this = _super.call(this, args);
+    _this.rotateDeg = _this.config.rotateDeg || 0;
+    return _this;
+  }
+  _createClass(Rotate2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      if (this.config.disable) {
+        return;
+      }
+      _get(_getPrototypeOf(Rotate2.prototype), "afterCreate", this).call(this);
+      this.appendChild(".xgplayer-icon", this.icons.rotate);
+      this.onBtnClick = this.onBtnClick.bind(this);
+      this.bind(".xgplayer-icon", ["click", "touchend"], this.onBtnClick);
+      this.on(VIDEO_RESIZE, function() {
+        if (_this2.rotateDeg && _this2.config.innerRotate) {
+          util.setTimeout(_this2, function() {
+            _this2.updateRotateDeg(_this2.rotateDeg, _this2.config.innerRotate);
+          }, 100);
+        }
+      });
+      var root = this.player.root;
+      this.rootWidth = root.style.width || root.offsetWidth || root.clientWidth;
+      this.rootHeight = root.style.height || root.offsetHeight || root.clientHeight;
+      if (this.rotateDeg) {
+        this.updateRotateDeg(this.rotateDeg, this.config.innerRotate);
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      _get(_getPrototypeOf(Rotate2.prototype), "destroy", this).call(this);
+      this.unbind(".xgplayer-icon", ["click", "touchend"], this.onBtnClick);
+    }
+  }, {
+    key: "onBtnClick",
+    value: function onBtnClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.emitUserAction(e, "rotate");
+      this.rotate(this.config.clockwise, this.config.innerRotate, 1);
+    }
+  }, {
+    key: "updateRotateDeg",
+    value: function updateRotateDeg(rotateDeg, innerRotate) {
+      if (!rotateDeg) {
+        rotateDeg = 0;
+      }
+      if (innerRotate) {
+        this.player.videoRotateDeg = rotateDeg;
+        return;
+      }
+      var player = this.player, rootWidth = this.rootWidth, rootHeight = this.rootHeight;
+      var root = player.root, innerContainer = player.innerContainer;
+      var video = player.media;
+      var width = root.offsetWidth;
+      var height = innerContainer && innerRotate ? innerContainer.offsetHeight : root.offsetHeight;
+      var rWidth = rootWidth;
+      var rHeight = rootHeight;
+      var x = 0;
+      var y = 0;
+      if (rotateDeg === 0.75 || rotateDeg === 0.25) {
+        rWidth = "".concat(height, "px");
+        rHeight = "".concat(width, "px");
+        x = -(height - width) / 2;
+        y = -(width - height) / 2;
+      }
+      var _transform = "translate(".concat(x, "px,").concat(y, "px) rotate(").concat(rotateDeg, "turn)");
+      var _styles = {
+        transformOrigin: "center center",
+        transform: _transform,
+        webKitTransform: _transform,
+        height: rHeight,
+        width: rWidth
+      };
+      var _target = innerRotate ? video : root;
+      var poster = innerRotate ? player.getPlugin("poster") : null;
+      Object.keys(_styles).map(function(key) {
+        _target.style[key] = _styles[key];
+        poster && poster.root && (poster.root.style[key] = _styles[key]);
+      });
+    }
+  }, {
+    key: "rotate",
+    value: function rotate() {
+      var clockwise = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+      var innerRotate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
+      var times = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
+      var player = this.player;
+      if (!this.rotateDeg) {
+        this.rotateDeg = 0;
+      }
+      var factor = clockwise ? 1 : -1;
+      this.rotateDeg = (this.rotateDeg + 1 + factor * 0.25 * times) % 1;
+      this.updateRotateDeg(this.rotateDeg, innerRotate);
+      player.emit(ROTATE, this.rotateDeg * 360);
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        rotate: RotateSvg
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
+        return;
+      }
+      return '\n    <xg-icon class="xgplayer-rotate">\n      <div class="xgplayer-icon">\n      </div>\n      '.concat(xgIconTips(this, "ROTATE_TIPS", this.playerConfig.isHideTips), "\n    </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "rotate";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 6,
+        innerRotate: true,
+        clockwise: false,
+        rotateDeg: 0,
+        disable: false
+      };
+    }
+  }]);
+  return Rotate2;
+}(Icon);
+export { Rotate as default };

package/es/plugins/rotate/index2.js

@@ -0,0 +1,2 @@
+var index = "";
+export { index as default };

package/es/plugins/screenShot/index.css

@@ -0,0 +1,3 @@
+.xgplayer .xgplayer-shot {
+  display: none;
+}

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

@@ -0,0 +1,30 @@
+export default class ScreenShot extends IconPlugin {
+    static get defaultConfig(): {
+        position: string;
+        index: number;
+        quality: number;
+        type: string;
+        format: string;
+        width: number;
+        height: number;
+        fitVideo: boolean;
+        disable: boolean;
+        name: string;
+    };
+    beforeCreate(args: any): void;
+    initSize: (data: any) => void;
+    onClickBtn(e: any): void;
+    saveScreenShot(data: any, filename: any): void;
+    createCanvas(width: any, height: any): void;
+    canvasCtx: CanvasRenderingContext2D;
+    canvas: HTMLCanvasElement;
+    shot(width: any, height: any, option?: {
+        quality: number;
+        type: string;
+    }): Promise<any>;
+    registerIcons(): {
+        screenshotIcon: any;
+    };
+    render(): string;
+}
+import IconPlugin from "../common/iconPlugin";