xgplayer 2.32.5 → 2.32.6

package/es/plugins/screenShot/index.js

@@ -0,0 +1,178 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, get as _get, getPrototypeOf as _getPrototypeOf } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
+import { VIDEO_RESIZE, SCREEN_SHOT } from "../../events.js";
+import "../../utils/debug.js";
+import { POSITIONS } from "../../plugin/plugin.js";
+import Icon from "../common/iconPlugin.js";
+var ScreenShot = /* @__PURE__ */ function(_IconPlugin) {
+  _inherits(ScreenShot2, _IconPlugin);
+  var _super = _createSuper(ScreenShot2);
+  function ScreenShot2() {
+    _classCallCheck(this, ScreenShot2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(ScreenShot2, [{
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      if (typeof args.player.config.screenShot === "boolean") {
+        args.config.disable = !args.player.config.screenShot;
+      }
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      _get(_getPrototypeOf(ScreenShot2.prototype), "afterCreate", this).call(this);
+      this.appendChild(".xgplayer-icon", this.icons.screenshotIcon);
+      var config = this.config;
+      this.initSize = function(data) {
+        if (config.fitVideo) {
+          config.width = data.vWidth;
+          config.height = data.vHeight;
+        }
+      };
+      this.once(VIDEO_RESIZE, this.initSize);
+    }
+  }, {
+    key: "onPluginsReady",
+    value: function onPluginsReady() {
+      this.show();
+      this.onClickBtn = this.onClickBtn.bind(this);
+      this.bind(["click", "touchend"], this.onClickBtn);
+    }
+  }, {
+    key: "saveScreenShot",
+    value: function saveScreenShot(data, filename) {
+      var saveLink = document.createElement("a");
+      saveLink.href = data;
+      saveLink.download = filename;
+      var event = document.createEvent("MouseEvents");
+      event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+      saveLink.dispatchEvent(event);
+    }
+  }, {
+    key: "createCanvas",
+    value: function createCanvas(width, height) {
+      var canvas = document.createElement("canvas");
+      var canvasCtx = canvas.getContext("2d");
+      this.canvasCtx = canvasCtx;
+      this.canvas = canvas;
+      canvas.width = width || this.config.width;
+      canvas.height = height || this.config.height;
+      canvasCtx.imageSmoothingEnabled = true;
+      if (canvasCtx.imageSmoothingEnabled) {
+        canvasCtx.imageSmoothingQuality = "high";
+      }
+    }
+  }, {
+    key: "onClickBtn",
+    value: function onClickBtn(e) {
+      var _this = this;
+      e.preventDefault();
+      e.stopPropagation();
+      this.emitUserAction(e, "shot");
+      this.shot().then(function(data) {
+        _this.emit(SCREEN_SHOT, data);
+        _this.saveScreenShot(data, _this.config.name + _this.config.format);
+      });
+    }
+  }, {
+    key: "shot",
+    value: function shot(width, height) {
+      var _this2 = this;
+      var option = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
+        quality: 0.92,
+        type: "image/png"
+      };
+      var config = this.config, player = this.player;
+      var quality = option.quality || config.quality;
+      var type = option.type || config.type;
+      return new Promise(function(resolve, reject) {
+        var canvas = null;
+        var canvasCtx;
+        if (player.media.canvas) {
+          canvas = player.media.canvas;
+        } else {
+          if (!_this2.canvas) {
+            _this2.createCanvas(width, height);
+          } else {
+            _this2.canvas.width = width || config.width;
+            _this2.canvas.height = height || config.height;
+          }
+          canvas = _this2.canvas;
+          canvasCtx = _this2.canvasCtx;
+          var mediaRatio = player.media.videoWidth / player.media.videoHeight;
+          var canvasRatio = canvas.width / canvas.height;
+          var sx = 0, sy = 0, sw = player.media.videoWidth, sh = player.media.videoHeight;
+          var dx, dy, dw, dh;
+          if (mediaRatio > canvasRatio) {
+            dw = canvas.width;
+            dh = canvas.width / mediaRatio;
+            dx = 0;
+            dy = Math.round((canvas.height - dh) / 2);
+          } else if (mediaRatio === canvasRatio) {
+            dw = canvas.width;
+            dh = canvas.height;
+            dx = 0;
+            dy = 0;
+          } else if (mediaRatio < canvasRatio) {
+            dw = canvas.height * mediaRatio;
+            dh = canvas.height;
+            dx = Math.round((canvas.width - dw) / 2);
+            dy = 0;
+          }
+          canvasCtx.drawImage(player.media, sx, sy, sw, sh, dx, dy, dw, dh);
+        }
+        var src = canvas.toDataURL(type, quality).replace(type, "image/octet-stream");
+        src = src.replace(/^data:image\/[^;]+/, "data:application/octet-stream");
+        resolve(src);
+      });
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        screenshotIcon: null
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      _get(_getPrototypeOf(ScreenShot2.prototype), "destroy", this).call(this);
+      this.unbind(["click", "touchend"], this.onClickBtn);
+      this.off(VIDEO_RESIZE, this.initSize);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
+        return;
+      }
+      var className = this.icons.screenshotIcon ? "xgplayer-icon" : "xgplayer-icon btn-text";
+      var langKey = "SCREENSHOT";
+      return '\n      <xg-icon class="xgplayer-shot">\n      <div class="'.concat(className, '">\n      ').concat(this.icons.screenshotIcon ? "" : '<span lang-key="'.concat(this.i18nKeys[langKey], '">').concat(this.i18n[langKey], "</span>"), "\n      </div>\n    </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "screenShot";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 5,
+        quality: 0.92,
+        type: "image/png",
+        format: ".png",
+        width: 600,
+        height: 337,
+        fitVideo: true,
+        disable: false,
+        name: "screenshot"
+      };
+    }
+  }]);
+  return ScreenShot2;
+}(Icon);
+export { ScreenShot as default };

package/es/plugins/screenShot/index.scss

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

package/es/plugins/start/index.css

@@ -0,0 +1,91 @@
+@keyframes playPause {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  99% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+.xgplayer xg-start-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.38);
+}
+.xgplayer .xgplayer-start {
+  width: 70px;
+  height: 70px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 5;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+.xgplayer .xgplayer-start svg {
+  width: 100%;
+  height: 100%;
+}
+.xgplayer .xgplayer-start.hide {
+  display: none;
+  pointer-events: none;
+}
+.xgplayer .xgplayer-start.focus-hide {
+  display: none;
+  pointer-events: none;
+}
+.xgplayer .xgplayer-start:hover {
+  opacity: 0.85;
+}
+.xgplayer .xgplayer-start .xg-icon-play {
+  display: block;
+}
+.xgplayer .xgplayer-start .xg-icon-pause {
+  display: none;
+}
+.xgplayer .xgplayer-start[data-state=pause] .xg-icon-play {
+  display: none;
+}
+.xgplayer .xgplayer-start[data-state=pause] .xg-icon-pause {
+  display: block;
+}
+.xgplayer .xgplayer-start.interact {
+  display: block;
+}
+.xgplayer .xgplayer-start.interact xg-start-inner {
+  animation: playPause 0.4s 0.1s ease-out forwards;
+}
+.xgplayer .xgplayer-start.show {
+  display: block;
+}
+.xgplayer.xgplayer-mobile xg-start-inner {
+  background: initial;
+  border-radius: 0;
+}
+.xgplayer.xgplayer-mobile .xgplayer-start {
+  height: 50px;
+  width: 50px;
+}
+.xgplayer.xgplayer-mobile .xgplayer-start:hover {
+  opacity: 1;
+}
+.xgplayer.xgplayer-inactive .xgplayer-start.auto-hide, .xgplayer.xgplayer-is-enter .xgplayer-start.auto-hide {
+  display: none;
+}
+.xgplayer.xgplayer-isloading.xgplayer-playing .xgplayer-start {
+  display: none;
+}
+.xgplayer.xgplayer-is-enter .xgplayer-start, .xgplayer.xgplayer-is-error .xgplayer-start {
+  display: none;
+}
+.xgplayer.xgplayer-is-enter .xgplayer-start.show, .xgplayer.xgplayer-is-error .xgplayer-start.show {
+  display: none;
+}

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

@@ -0,0 +1,41 @@
+export default Start;
+export type IStartConfig = {
+    [propName: string]: any;
+    isShowPause?: boolean;
+    isShowEnd?: boolean;
+    disableAnimate?: boolean;
+    mode?: 'hide' | 'show' | 'auto';
+};
+declare class Start extends Plugin {
+    /**
+     * @type IStartConfig
+     */
+    static get defaultConfig(): IStartConfig;
+    constructor(args: any);
+    autoPlayStart: boolean;
+    clickHandler: any;
+    onPlayerReset: () => void;
+    onAutoplayStart: () => void;
+    registerIcons(): {
+        startPlay: {
+            icon: any;
+            class: string;
+        };
+        startPause: {
+            icon: any;
+            class: string;
+        };
+    };
+    initIcons(): void;
+    show(): void;
+    focusHide(): void;
+    recover(): void;
+    switchStatus(isAnimate: any): void;
+    animate(endShow: any): void;
+    _animateId: any;
+    endAnimate(): void;
+    switchPausePlay(e: any): void;
+    onPlayPause(status: any): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/start/index.js

@@ -0,0 +1,267 @@
+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 { READY, AUTOPLAY_STARTED, AUTOPLAY_PREVENTED, PLAY, PAUSE, RESET } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+import { STATES } from "../../state.js";
+import PlaySvg from "../assets/play.js";
+import PauseSvg from "../assets/pause.js";
+var AnimateMap = {};
+function addAnimate(key, seconds) {
+  var callback = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
+    start: null,
+    end: null
+  };
+  if (AnimateMap[key]) {
+    window.clearTimeout(AnimateMap[key].id);
+  }
+  AnimateMap[key] = {};
+  callback.start && callback.start();
+  AnimateMap[key].id = window.setTimeout(function() {
+    callback.end && callback.end();
+    window.clearTimeout(AnimateMap[key].id);
+    delete AnimateMap[key];
+  }, seconds);
+  return AnimateMap[key].id;
+}
+function clearAnimation(id) {
+  if (id) {
+    window.clearTimeout(id);
+    return;
+  }
+  Object.keys(AnimateMap).map(function(key) {
+    window.clearTimeout(AnimateMap[key].id);
+    delete AnimateMap[key];
+  });
+}
+var Start = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Start2, _Plugin);
+  var _super = _createSuper(Start2);
+  function Start2(args) {
+    var _this;
+    _classCallCheck(this, Start2);
+    _this = _super.call(this, args);
+    _defineProperty(_assertThisInitialized(_this), "onPlayerReset", function() {
+      _this.autoPlayStart = false;
+      var className = _this.config.mode === "auto" ? "auto-hide" : "hide";
+      _this.setAttr("data-state", "play");
+      util.removeClass(_this.root, className);
+      _this.show();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onAutoplayStart", function() {
+      if (_this.autoPlayStart) {
+        return;
+      }
+      var className = _this.config.mode === "auto" ? "auto-hide" : "hide";
+      util.addClass(_this.root, className);
+      _this.autoPlayStart = true;
+      _this.onPlayPause("play");
+    });
+    _this.autoPlayStart = false;
+    return _this;
+  }
+  _createClass(Start2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      var player = this.player, playerConfig = this.playerConfig;
+      this.initIcons();
+      this.once(READY, function() {
+        if (playerConfig) {
+          if (playerConfig.lang && playerConfig.lang === "en") {
+            util.addClass(player.root, "lang-is-en");
+          } else if (playerConfig.lang === "jp") {
+            util.addClass(player.root, "lang-is-jp");
+          }
+        }
+      });
+      this.on(AUTOPLAY_STARTED, this.onAutoplayStart);
+      if (!playerConfig.autoplay) {
+        this.show();
+      }
+      this.on(AUTOPLAY_PREVENTED, function() {
+        var className = _this2.config.mode === "auto" ? "auto-hide" : "hide";
+        _this2.setAttr("data-state", "play");
+        util.removeClass(_this2.root, className);
+        _this2.show();
+      });
+      this.on(PLAY, function() {
+        _this2.onPlayPause("play");
+      });
+      this.on(PAUSE, function() {
+        _this2.onPlayPause("pause");
+      });
+      this.on(RESET, function() {
+        _this2.onPlayerReset();
+      });
+      this.clickHandler = this.hook("startClick", this.switchPausePlay, {
+        pre: function pre(e) {
+          e.cancelable && e.preventDefault();
+          e.stopPropagation();
+          var paused = _this2.player.paused;
+          _this2.emitUserAction(e, "switch_play_pause", {
+            props: "paused",
+            from: paused,
+            to: !paused
+          });
+        }
+      });
+      this.bind(["click", "touchend"], this.clickHandler);
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        startPlay: {
+          icon: PlaySvg,
+          class: "xg-icon-play"
+        },
+        startPause: {
+          icon: PauseSvg,
+          class: "xg-icon-pause"
+        }
+      };
+    }
+  }, {
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      this.appendChild("xg-start-inner", icons.startPlay);
+      this.appendChild("xg-start-inner", icons.startPause);
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      util.addClass(this.root, "hide");
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      util.removeClass(this.root, "hide");
+    }
+  }, {
+    key: "focusHide",
+    value: function focusHide() {
+      util.addClass(this.root, "focus-hide");
+    }
+  }, {
+    key: "recover",
+    value: function recover() {
+      util.removeClass(this.root, "focus-hide");
+    }
+  }, {
+    key: "switchStatus",
+    value: function switchStatus(isAnimate) {
+      if (isAnimate) {
+        this.setAttr("data-state", !this.player.paused ? "play" : "pause");
+      } else {
+        this.setAttr("data-state", this.player.paused ? "play" : "pause");
+      }
+    }
+  }, {
+    key: "animate",
+    value: function animate(endShow) {
+      var _this3 = this;
+      this._animateId = addAnimate("pauseplay", 400, {
+        start: function start() {
+          util.addClass(_this3.root, "interact");
+          _this3.show();
+          _this3.switchStatus(true);
+        },
+        end: function end() {
+          util.removeClass(_this3.root, "interact");
+          !endShow && _this3.hide();
+          _this3._animateId = null;
+        }
+      });
+    }
+  }, {
+    key: "endAnimate",
+    value: function endAnimate() {
+      util.removeClass(this.root, "interact");
+      clearAnimation(this._animateId);
+      this._animateId = null;
+    }
+  }, {
+    key: "switchPausePlay",
+    value: function switchPausePlay(e) {
+      var player = this.player;
+      e.cancelable && e.preventDefault();
+      e.stopPropagation();
+      if (player.state < STATES.READY) {
+        return;
+      }
+      var paused = this.player.paused;
+      if (!paused && player.state === STATES.RUNNING) {
+        player.pause();
+      } else {
+        player.play();
+      }
+    }
+  }, {
+    key: "onPlayPause",
+    value: function onPlayPause(status) {
+      var config = this.config, player = this.player;
+      if (!player || player.state < STATES.RUNNING || !this.autoPlayStart) {
+        return;
+      }
+      if (config.mode === "show") {
+        this.switchStatus();
+        this.show();
+        return;
+      }
+      if (config.mode === "auto") {
+        this.switchStatus();
+        return;
+      }
+      if (config.isShowPause && player.paused && !player.ended || config.isShowEnd && player.ended) {
+        this.switchStatus();
+        this.show();
+        this.endAnimate();
+        return;
+      }
+      if (config.disableAnimate) {
+        this.switchStatus();
+        this.hide();
+        return;
+      }
+      if (status === "play") {
+        this.autoPlayStart ? this.animate() : this.hide();
+      } else {
+        if (!this.autoPlayStart || player.ended) {
+          return;
+        }
+        this.animate();
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind(["click", "touchend"], this.clickHandler);
+      clearAnimation(this._animateId);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var className = this.playerConfig.autoplay ? this.config.mode === "auto" ? "auto-hide" : "hide" : "";
+      return '\n    <xg-start class="xgplayer-start '.concat(className, '">\n    <xg-start-inner></xg-start-inner>\n    </xg-start>');
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "start";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        isShowPause: false,
+        isShowEnd: false,
+        disableAnimate: false,
+        mode: "hide"
+      };
+    }
+  }]);
+  return Start2;
+}(Plugin);
+export { Start as default };

package/es/plugins/start/index.scss

@@ -0,0 +1,115 @@
+@import "../../style/variable";
+
+.xgplayer {
+  @keyframes playPause {
+    0%{
+      transform: scale(1);
+      opacity:1;
+    }
+    99%{
+      transform: scale(1.3);
+      opacity:0;
+    }
+    to {
+      transform: scale(1);
+      opacity:0;
+    }
+  }
+  xg-start-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 50%;
+    background: $startBgColor;
+  }
+  .xgplayer-start {
+    width: 70px;
+    height: 70px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 5;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+    &.hide {
+      display: none;
+      pointer-events: none;
+    }
+    &.focus-hide {
+      display: none;
+      pointer-events: none;
+    }
+    &:hover{
+      opacity: 0.85;
+    }
+    .xg-icon-play {
+      display: block;
+    }
+    .xg-icon-pause {
+      display: none;
+    }
+    &[data-state=pause] {
+      .xg-icon-play {
+        display: none;
+      }
+      .xg-icon-pause {
+        display: block;
+      }
+    }
+    &.interact {
+      xg-start-inner {
+        animation: playPause .4s 0.1s ease-out forwards;
+      }
+      display: block;
+    }
+    // &.hide {
+    //   display: none;
+    // }
+    &.show {
+      display: block;
+    }
+  }
+  &.xgplayer-mobile {
+    xg-start-inner {
+      background: initial;
+      border-radius: 0;
+    }
+    .xgplayer-start {
+      height: 50px;
+      width: 50px;
+      &:hover{
+        opacity: 1;
+      }
+    }
+  }
+  // &.xgplayer-ended {
+  //   .xgplayer-start {
+  //     display: none;
+  //   }
+  // }
+  &.xgplayer-inactive, &.xgplayer-is-enter {
+    .xgplayer-start {
+      &.auto-hide {
+        display: none;
+      }
+    }
+  }
+  &.xgplayer-isloading.xgplayer-playing {
+    .xgplayer-start {
+      display: none;
+    }
+  }
+  &.xgplayer-is-enter, &.xgplayer-is-error {
+    .xgplayer-start {
+      display: none;
+      &.show {
+        display: none;
+      }
+    }
+  }
+}