xgplayer 2.32.5 → 2.32.6

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

@@ -0,0 +1,68 @@
+export type IMiniScreenConfig = {
+    [propName: string]: any;
+    index?: number;
+    disable?: boolean;
+    width?: number;
+    height?: number;
+    left?: number;
+    top?: number;
+    isShowIcon?: boolean;
+    isScrollSwitch?: boolean;
+    scrollTop?: number;
+    disableDrag?: boolean;
+};
+/**
+ * @typedef {{
+ *   index?: number,
+ *   disable?: boolean,
+ *   width?: number,
+ *   height?: number,
+ *   left?: number, // 默认左下角
+ *   top?: number, // 默认左下角
+ *   isShowIcon?: boolean, // 是否显示icon
+ *   isScrollSwitch?: boolean, // 滚动自动切换自动切换
+ *   scrollTop?: number, // 触发滚动的高度
+ *   disableDrag?: boolean, // 禁用拖拽
+ *   [propName: string]: any
+ * }} IMiniScreenConfig
+ */
+declare class MiniScreen extends Plugin {
+    /**
+     * @type IMiniScreenConfig
+     */
+    static get defaultConfig(): IMiniScreenConfig;
+    constructor(args: any);
+    isMini: boolean;
+    isClose: boolean;
+    pos: {
+        left: any;
+        top: any;
+        height: any;
+        width: any;
+        scrollY: number;
+    };
+    lastStyle: {};
+    beforeCreate(args: any): void;
+    _draggabilly: Draggabilly;
+    registerIcons(): {
+        play: {
+            icon: any;
+            class: string;
+        };
+        pause: {
+            icon: any;
+            class: string;
+        };
+    };
+    initIcons(): void;
+    onCancelClick: (e: any) => void;
+    onCenterClick: (e: any) => void;
+    onScroll: (e: any) => void;
+    getMini(): void;
+    exitMini(): boolean;
+    render(): string;
+}
+import MiniScreenIcon from "./miniScreenIcon";
+import Plugin from "../../plugin";
+import Draggabilly from "../../utils/draggabilly";
+export { MiniScreen as default, MiniScreenIcon };

package/es/plugins/miniScreen/index.js

@@ -0,0 +1,212 @@
+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 { PAUSE, PLAY, MINI_STATE_CHANGE } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+import { xgIconTips } from "../common/iconTools.js";
+import PlaySvg from "../assets/play.js";
+import PauseSvg from "../assets/pause.js";
+import MiniScreenIcon from "./miniScreenIcon.js";
+export { default as MiniScreenIcon } from "./miniScreenIcon.js";
+import Draggabilly from "../../utils/draggabilly.js";
+var MiniScreen = /* @__PURE__ */ function(_Plugin) {
+  _inherits(MiniScreen2, _Plugin);
+  var _super = _createSuper(MiniScreen2);
+  function MiniScreen2(args) {
+    var _this;
+    _classCallCheck(this, MiniScreen2);
+    _this = _super.call(this, args);
+    _defineProperty(_assertThisInitialized(_this), "onCancelClick", function(e) {
+      _this.exitMini();
+      _this.isClose = true;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCenterClick", function(e) {
+      var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player;
+      player.paused ? player.play() : player.pause();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onScroll", function(e) {
+      if (!window.scrollY && window.scrollY !== 0 || Math.abs(window.scrollY - _this.pos.scrollY) < 50) {
+        return;
+      }
+      var scrollHeight = parseInt(util.getCss(_this.player.root, "height"));
+      scrollHeight += _this.config.scrollTop;
+      _this.pos.scrollY = window.scrollY;
+      if (window.scrollY > scrollHeight + 5) {
+        !_this.isMini && !_this.isClose && _this.getMini();
+      } else if (window.scrollY <= scrollHeight) {
+        _this.isMini && _this.exitMini();
+        _this.isClose = false;
+      }
+    });
+    _this.isMini = false;
+    _this.isClose = false;
+    var _assertThisInitialize2 = _assertThisInitialized(_this), config = _assertThisInitialize2.config;
+    _this.pos = {
+      left: config.left < 0 ? window.innerWidth - config.width - 20 : config.left,
+      top: config.top < 0 ? window.innerHeight - config.height - 20 : config.top,
+      height: _this.config.height,
+      width: _this.config.width,
+      scrollY: window.scrollY || 0
+    };
+    _this.lastStyle = null;
+    return _this;
+  }
+  _createClass(MiniScreen2, [{
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      if (typeof args.player.config.mini === "boolean") {
+        args.config.isShowIcon = args.player.config.mini;
+      }
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      this.initIcons();
+      this.on(PAUSE, function() {
+        _this2.setAttr("data-state", "pause");
+      });
+      this.on(PLAY, function() {
+        _this2.setAttr("data-state", "play");
+      });
+    }
+  }, {
+    key: "onPluginsReady",
+    value: function onPluginsReady() {
+      var _this3 = this;
+      var player = this.player, config = this.config;
+      if (config.disable) {
+        return;
+      }
+      if (this.config.isShowIcon) {
+        var options = {
+          config: {
+            onClick: function onClick() {
+              _this3.getMini();
+            }
+          }
+        };
+        player.controls.registerPlugin(MiniScreenIcon, options, MiniScreenIcon.pluginName);
+      }
+      var eventName = util.checkTouchSupport() ? "touchend" : "click";
+      this.bind(".mini-cancel-btn", eventName, this.onCancelClick);
+      this.bind(".play-icon", eventName, this.onCenterClick);
+      if (!this.config.disableDrag) {
+        this._draggabilly = new Draggabilly(this.player.root, {
+          handle: this.root
+        });
+      }
+      if (this.config.isScrollSwitch) {
+        window.addEventListener("scroll", this.onScroll);
+      }
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        play: {
+          icon: PlaySvg,
+          class: "xg-icon-play"
+        },
+        pause: {
+          icon: PauseSvg,
+          class: "xg-icon-pause"
+        }
+      };
+    }
+  }, {
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      this.appendChild(".play-icon", icons.play);
+      this.appendChild(".play-icon", icons.pause);
+    }
+  }, {
+    key: "getMini",
+    value: function getMini() {
+      var _this4 = this;
+      if (this.isMini) {
+        return;
+      }
+      var player = this.player, playerConfig = this.playerConfig;
+      var target = this.config.target || this.player.root;
+      this.lastStyle = {};
+      util.addClass(player.root, "xgplayer-mini");
+      ["width", "height", "top", "left"].map(function(key) {
+        _this4.lastStyle[key] = target.style[key];
+        target.style[key] = "".concat(_this4.pos[key], "px");
+      });
+      if (playerConfig.fluid) {
+        target.style["padding-top"] = "";
+      }
+      this.emit(MINI_STATE_CHANGE, true);
+      player.isMini = this.isMini = true;
+    }
+  }, {
+    key: "exitMini",
+    value: function exitMini() {
+      var _this5 = this;
+      if (!this.isMini) {
+        return false;
+      }
+      var player = this.player, playerConfig = this.playerConfig;
+      var target = this.config.target || this.player.root;
+      util.removeClass(player.root, "xgplayer-mini");
+      if (this.lastStyle) {
+        Object.keys(this.lastStyle).map(function(key) {
+          target.style[key] = _this5.lastStyle[key];
+        });
+      }
+      this.lastStyle = null;
+      if (playerConfig.fluid) {
+        player.root.style.width = "100%";
+        player.root.style.height = "0";
+        player.root.style["padding-top"] = "".concat(playerConfig.height * 100 / playerConfig.width, "%");
+      }
+      this.emit(MINI_STATE_CHANGE, false);
+      this.isMini = player.isMini = false;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      window.removeEventListener("scroll", this.onScroll);
+      var eventName = util.checkTouchSupport() ? "touchend" : "click";
+      this.unbind(".mini-cancel-btn", eventName, this.onCancelClick);
+      this.unbind(".play-icon", eventName, this.onCenterClick);
+      this._draggabilly && this._draggabilly.destroy();
+      this._draggabilly = null;
+      this.exitMini();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
+        return;
+      }
+      return '\n      <xg-mini-layer class="xg-mini-layer">\n      <xg-mini-header class="xgplayer-mini-header">\n      '.concat(xgIconTips(this, "MINI_DRAG", this.playerConfig.isHideTips), '\n      </xg-mini-header>\n      <div class="mini-cancel-btn">\n        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">\n          <path fill="#fff" fill-rule="evenodd" d="M3.99 3.49a1 1 0 0 1 1.414 0L10 8.085l4.596-4.595a1 1 0 1 1 1.414 1.414L11.414 9.5l4.596 4.596a1 1 0 0 1 .084 1.32l-.084.094a1 1 0 0 1-1.414 0L10 10.914 5.404 15.51a1 1 0 0 1-1.414-1.414L8.585 9.5 3.99 4.904a1 1 0 0 1-.084-1.32z"></path>\n        </svg>\n      </div>\n      <div class="play-icon">\n      </div>\n      </xg-mini-layer>');
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "miniscreen";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        index: 10,
+        disable: false,
+        width: 320,
+        height: 180,
+        left: -1,
+        top: -1,
+        isShowIcon: false,
+        isScrollSwitch: false,
+        scrollTop: 0,
+        disableDrag: false
+      };
+    }
+  }]);
+  return MiniScreen2;
+}(Plugin);
+export { MiniScreen as default };

package/es/plugins/miniScreen/index.scss

@@ -0,0 +1,198 @@
+@import "../../style/variable";
+.xg-mini-layer {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 11;
+  background: linear-gradient(180deg,rgba(57,57,57,.9),rgba(57,57,57,0) 50.27%);
+  .mask {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  xg-mini-header {
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 40px;
+    box-sizing: border-box;
+    padding: 10px 3px 0 8px;
+    justify-content: space-between;
+    color: #ffffff;
+    font-size: 14px;
+    position: absolute;
+    // 超过结束时的blur层
+    z-index: 22;
+    .xgplayer-pip-disableBtn {
+      pointer-events: all;
+    }
+    #disabledMini {
+      display: none;
+      position: relative;
+    }
+    #disabledMini + label {
+      cursor: pointer;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+    #disabledMini + label::before {
+      content: "";
+      color: #ff142b;
+      background-color: transparent;
+      border-radius: 2px;
+      border: solid 1px #cdcdcd;
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      text-align: center;
+      vertical-align: middle;
+      line-height: 16px;
+      margin-right: 7px;
+    }
+    #disabledMini:checked {
+      + label {
+        color: #ff142b;
+      }
+      + label::before {
+        border-color: #ff142b;
+      }
+      + label:after {
+        content: "";
+        position: absolute;
+        width: 4px;
+        height: 8px;
+        border-color: #ff142b;
+        border-style: solid;
+        border-width: 0px 2px 2px 0px;
+        transform: rotate(45deg);
+        left: 6px;
+        top: 5px;
+      }
+    }
+    .xgplayer-mini-disableBtn {
+      xg-tips {
+        position: absolute;
+        padding: 4px 6px;
+        white-space: nowrap;
+        bottom: -30px;
+        right: 15px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.54);
+        display: none;
+      }
+    }
+    .xgplayer-mini-disableBtn:hover {
+      #disabledMini {
+        + label::before {
+          border-color: #ff142b;
+        }
+        + label {
+          color: #ff142b;
+        }
+      }
+      xg-tips {
+        display: block;
+      }
+    }
+  }
+  .mini-cancel-btn {
+    cursor: pointer;
+    display: block;
+    color: #fff;
+    width: 40px;
+    height: 38px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    text-align: center;
+    line-height: 38px;
+  }
+  .play-icon {
+    cursor: pointer;
+    height: 48px;
+    width: 48px;
+    position: absolute;
+    background: rgba(0,0,0,.54);
+    border-radius: 24px;
+    top: 50%;
+    left: 50%;
+    margin: -24px 0 0 -24px;
+    svg, img {
+      width: 50px;
+      height: 50px;
+      fill: #faf7f7;
+    }
+  }
+  .xg-icon-play {
+    display: none;
+  }
+  .xg-icon-pause {
+    display: block;
+  }
+
+  &[data-state=pause] {
+    .xg-icon-play {
+      display: block;
+    }
+    .xg-icon-pause {
+      display: none;
+    }
+  }
+}
+.xgplayer-miniicon {
+  position: relative;
+  outline: none;
+  display: block;
+  .name {
+    text-align: center;
+    font-size: 13px;
+    line-height: 20px;
+    height: 20px;
+    color: $definitionNameColor;
+    line-height: 40px;
+    span{
+      font-size: 13px;
+      width: 60px;
+      height: 20px;
+      line-height: 20px;
+      background: $definitionNameBgColor;
+      border-radius: 10px;
+      display:inline-block;
+      vertical-align:middle;
+    }
+  }
+}
+
+.xgplayer-mini {
+  position: fixed;
+  width: 320px;
+  height: 180px;
+  z-index: 91;
+  box-shadow: 0 4px 7px 2px rgba(0, 0, 0, .2);
+  &:hover {
+    cursor: move;
+    .xg-mini-layer {
+      display: block;
+    }
+  }
+  &.xgplayer-ended {
+    .xg-mini-layer {
+      display: none;
+    }
+  }
+}
+
+.xgplayer-mobile {
+  .xg-mini-layer .play-icon {
+    background: none;
+    border-radius: initial;
+  }
+}

package/es/plugins/miniScreen/miniScreenIcon.d.ts

@@ -0,0 +1,11 @@
+export default MiniScreenIcon;
+declare class MiniScreenIcon extends Plugin {
+    static get defaultConfig(): {
+        position: string;
+        index: number;
+    };
+    getMini(): void;
+    exitMini(): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/miniScreen/miniScreenIcon.js

@@ -0,0 +1,56 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+var MiniScreenIcon = /* @__PURE__ */ function(_Plugin) {
+  _inherits(MiniScreenIcon2, _Plugin);
+  var _super = _createSuper(MiniScreenIcon2);
+  function MiniScreenIcon2() {
+    _classCallCheck(this, MiniScreenIcon2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(MiniScreenIcon2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      this.getMini = this.getMini.bind(this);
+      this.exitMini = this.exitMini.bind(this);
+      this.bind("click", this.getMini);
+    }
+  }, {
+    key: "getMini",
+    value: function getMini() {
+      this.config.onClick && this.config.onClick();
+    }
+  }, {
+    key: "exitMini",
+    value: function exitMini() {
+      this.config.onClick && this.config.onClick();
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind(["click", "touchend"], this.getMini);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var langKey = "MINISCREEN";
+      return '\n      <xg-icon class="xgplayer-miniicon">\n      <div class="xgplayer-icon btn-text"><span class="icon-text" lang-key="'.concat(this.i18nKeys[langKey], '">').concat(this.i18n[langKey], "</span></div>\n      </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "miniscreenIcon";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 10
+      };
+    }
+  }]);
+  return MiniScreenIcon2;
+}(Plugin);
+export { MiniScreenIcon as default };