xgplayer 2.32.5 → 2.32.6

package/es/plugins/controls/index.scss

@@ -0,0 +1,204 @@
+@import "../../style/variable";
+//controls
+$controlHeight: 48px;
+// tips
+// $tipsColor: #fff;
+// $tipsBgColor: rgba(0, 0, 0, 0.8);
+// $tipsFontsize: 12px;
+
+.xgplayer {
+  &.not-allow-autoplay,
+  &.xgplayer-nostart {
+    // .xgplayer-controls, .flex-controls {
+    .xgplayer-controls {
+      pointer-events: none;
+      visibility: hidden;
+      cursor: default;
+      opacity: 0;
+    }
+  }
+
+  &.xgplayer-inactive {
+    .controls-autohide {
+      // display: none;
+      pointer-events: none;
+      visibility: hidden;
+      cursor: default;
+      opacity: 0;
+    }
+    // .controls-permanent {
+    //   pointer-events: auto;
+    //   visibility: visible;
+    //   opacity: 1;
+    // }
+  }
+
+  &.not-allow-autoplay,
+  &.xgplayer-nostart {
+    .xgplayer-controls-initshow {
+      pointer-events: auto;
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  .xgplayer-controls {
+    display: block;
+    position: absolute;
+    visibility: visible;
+    height: $controlHeight;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 1;
+    z-index: 10;
+    background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.37),rgba(0,0,0,.75),rgba(0,0,0,.75));
+    transition: opacity .5s ease,visibility .5s ease;
+    &.show {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
+  .xg-inner-controls {
+    position: absolute;
+    height: 40px;
+    bottom: 0;
+    justify-content: space-between;
+    display: flex;
+  }
+
+  .xg-left-grid,  .xg-right-grid {
+    position: relative;
+    // float: left;
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 1;
+    height: 100%;
+    z-index: 1;
+  }
+
+  .xg-right-grid {
+    // float: right;
+    flex-direction: row-reverse;
+    > :first-child {
+      margin-right: 0;
+    }
+    xg-icon {
+      margin-left: 0;
+    }
+  }
+
+  .xg-left-grid {
+    > :first-child {
+      margin-left: 0;
+    }
+    xg-icon {
+      margin-right: 0;
+    }
+  }
+
+  .xg-center-grid {
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    outline: none;
+    // top: -5px;
+    top: -20px;
+    padding: 5px 0;
+    text-align: center;
+  }
+
+  .flex-controls {
+    .xg-inner-controls {
+      justify-content: space-around;
+      display: flex;
+      bottom: 8px;
+    }
+    .xg-center-grid {
+      display: flex;
+      flex: 1;
+      position: relative;
+      top: 0;
+      height: 100%;
+      justify-content: space-between;
+      align-items: center;
+      left: 0;
+      right: 0;
+      padding: 0 16px;
+    }
+  }
+  &.xgplayer-mobile {
+    .xg-center-grid {
+      z-index: 2;
+    }
+    .flex-controls {
+      .xg-center-grid {
+        padding: 0 8px;
+      }
+    }
+  }
+
+  .bottom-controls {
+    .xg-center-grid {
+      top: 20px;
+      padding:0;
+    }
+    .xg-left-grid, .xg-right-grid {
+      bottom: 10px;
+    }
+  }
+
+  .mini-controls {
+    background-image: none;
+    .xg-inner-controls {
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .xg-center-grid {
+      bottom: -28px;
+      top: auto;
+      padding: 0;
+    }
+    .xg-left-grid,  .xg-right-grid {
+      display: none;
+    }
+  }
+
+  // class witch position follow controls start
+  .controls-follow {
+    bottom: 70px;
+    transition: bottom .3s ease;
+  }
+
+  &.flex-controls {
+    .controls-follow {
+      bottom: 45px;
+    }
+  }
+
+  &.xgplayer-inactive, &.no-controls, &.mini-controls {
+    .controls-follow {
+      bottom: 10px;
+    }
+  }
+  // class witch position follow controls end
+}
+
+// @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
+//   .xgplayer-mobile {
+//     &.xgplayer-is-fullscreen, &.xgplayer-is-cssfullscreen{
+//       .flex-controls {
+//         /* bottom: 34px; */
+//         /* iOS 11.0 */
+//         bottom: constant(safe-area-inset-bottom);
+//         /* 11.2+ */
+//         bottom: env(Safe-area-inset-bottom, 20px);
+//       }
+//     }
+//   }
+// }

package/es/plugins/cssFullScreen/index.css

@@ -0,0 +1,12 @@
+.xgplayer .xgplayer-cssfullscreen .xg-get-cssfull {
+  display: block;
+}
+.xgplayer .xgplayer-cssfullscreen .xg-exit-cssfull {
+  display: none;
+}
+.xgplayer .xgplayer-cssfullscreen[data-state=full] .xg-get-cssfull {
+  display: none;
+}
+.xgplayer .xgplayer-cssfullscreen[data-state=full] .xg-exit-cssfull {
+  display: block;
+}

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

@@ -0,0 +1,40 @@
+/**
+  * @typedef { {
+  *  position: string,
+  *  index: number,
+  *  disable: boolean,
+  *  target: null | HTMLElement,
+  *  [propName: string]: any
+  * } } ICssConfig
+  */
+export default class CssFullScreen extends IconPlugin {
+    /**
+     * @type ICssConfig
+     */
+    static get defaultConfig(): ICssConfig;
+    beforeCreate(args: any): void;
+    btnClick(e: any): void;
+    handleCssFullscreen: any;
+    initIcons(): void;
+    animate(isFullScreen: any): void;
+    switchTips(isFullScreen: any): void;
+    registerIcons(): {
+        cssFullscreen: {
+            icon: any;
+            class: string;
+        };
+        exitCssFullscreen: {
+            icon: any;
+            class: string;
+        };
+    };
+    render(): string;
+}
+export type ICssConfig = {
+    [propName: string]: any;
+    position: string;
+    index: number;
+    disable: boolean;
+    target: null | HTMLElement;
+};
+import IconPlugin from "../common/iconPlugin";

package/es/plugins/cssFullScreen/index.js

@@ -0,0 +1,136 @@
+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 { CSS_FULLSCREEN_CHANGE } 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 CssFullSceenSvg from "../assets/requestCssFull.js";
+import ExitCssFullSceenSvg from "../assets/exitCssFull.js";
+var CssFullScreen = /* @__PURE__ */ function(_IconPlugin) {
+  _inherits(CssFullScreen2, _IconPlugin);
+  var _super = _createSuper(CssFullScreen2);
+  function CssFullScreen2() {
+    _classCallCheck(this, CssFullScreen2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(CssFullScreen2, [{
+    key: "beforeCreate",
+    value: function beforeCreate(args) {
+      if (typeof args.player.config.cssFullscreen === "boolean") {
+        args.config.disable = !args.player.config.cssFullscreen;
+      }
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this = this;
+      _get(_getPrototypeOf(CssFullScreen2.prototype), "afterCreate", this).call(this);
+      if (this.config.disable) {
+        return;
+      }
+      if (this.config.target) {
+        this.playerConfig.fullscreenTarget = this.config.target;
+      }
+      this.initIcons();
+      this.on(CSS_FULLSCREEN_CHANGE, function(isCssfullScreen) {
+        _this.animate(isCssfullScreen);
+      });
+      this.btnClick = this.btnClick.bind(this);
+      this.handleCssFullscreen = this.hook("cssFullscreen_change", this.btnClick, {
+        pre: function pre(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      });
+      this.bind(["click", "touchend"], this.handleCssFullscreen);
+    }
+  }, {
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      var contentIcon = this.find(".xgplayer-icon");
+      contentIcon.appendChild(icons.cssFullscreen);
+      contentIcon.appendChild(icons.exitCssFullscreen);
+    }
+  }, {
+    key: "btnClick",
+    value: function btnClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var isCssfullScreen = this.player.isCssfullScreen;
+      this.emitUserAction(e, "switch_cssfullscreen", {
+        cssfullscreen: isCssfullScreen
+      });
+      if (!isCssfullScreen) {
+        this.player.getCssFullscreen();
+      } else {
+        this.player.exitCssFullscreen();
+      }
+    }
+  }, {
+    key: "animate",
+    value: function animate(isFullScreen) {
+      if (!this.root) {
+        return;
+      }
+      isFullScreen ? this.setAttr("data-state", "full") : this.setAttr("data-state", "normal");
+      this.switchTips(isFullScreen);
+    }
+  }, {
+    key: "switchTips",
+    value: function switchTips(isFullScreen) {
+      var i18nKeys = this.i18nKeys;
+      var tipDom = this.find(".xg-tips");
+      tipDom && this.changeLangTextKey(tipDom, isFullScreen ? i18nKeys.EXITCSSFULLSCREEN_TIPS : i18nKeys.CSSFULLSCREEN_TIPS);
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        cssFullscreen: {
+          icon: CssFullSceenSvg,
+          class: "xg-get-cssfull"
+        },
+        exitCssFullscreen: {
+          icon: ExitCssFullSceenSvg,
+          class: "xg-exit-cssfull"
+        }
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      _get(_getPrototypeOf(CssFullScreen2.prototype), "destroy", this).call(this);
+      this.unbind(["click", "touchend"], this.btnClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
+        return;
+      }
+      return `<xg-icon class='xgplayer-cssfullscreen'>
+    <div class="xgplayer-icon">
+    </div>
+    `.concat(xgIconTips(this, "CSSFULLSCREEN_TIPS", this.playerConfig.isHideTips), "\n    </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "cssFullscreen";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 1,
+        disable: false,
+        target: null
+      };
+    }
+  }]);
+  return CssFullScreen2;
+}(Icon);
+export { CssFullScreen as default };

package/es/plugins/cssFullScreen/index.scss

@@ -0,0 +1,19 @@
+.xgplayer {
+  .xgplayer-cssfullscreen {
+    .xg-get-cssfull {
+      display: block;
+    }
+    .xg-exit-cssfull {
+      display: none;
+    }
+  
+    &[data-state=full] {
+      .xg-get-cssfull{
+        display: none;
+      }
+      .xg-exit-cssfull {
+        display: block;
+      }
+    }
+  }
+}

package/es/plugins/danmu/danmuIcon.d.ts

@@ -0,0 +1,24 @@
+export default DanmuIcon;
+declare class DanmuIcon extends Plugin {
+    static get defaultConfig(): {
+        position: string;
+        index: number;
+        onSwitch: (event: any, state: any) => void;
+    };
+    onStateChange(e: any): void;
+    registerIcons(): {
+        openDanmu: {
+            icon: string;
+            class: string;
+        };
+        closeDanmu: {
+            icon: string;
+            class: string;
+        };
+    };
+    switchState(isOpen: any): void;
+    initIcons(): void;
+    switchTips(isOpen: any): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/danmu/danmuIcon.js

@@ -0,0 +1,98 @@
+import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+import { xgIconTips } from "../common/iconTools.js";
+var DANMU_OPEN = '<dk-switch class="danmu-switch">\n<span class="txt">\u5F39</span>\n</dk-switch>';
+var DanmuIcon = /* @__PURE__ */ function(_Plugin) {
+  _inherits(DanmuIcon2, _Plugin);
+  var _super = _createSuper(DanmuIcon2);
+  function DanmuIcon2() {
+    _classCallCheck(this, DanmuIcon2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(DanmuIcon2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      this.initIcons();
+      this.onStateChange = this.onStateChange.bind(this);
+      this.bind(["click", "touchend"], this.onStateChange);
+    }
+  }, {
+    key: "registerIcons",
+    value: function registerIcons() {
+      return {
+        openDanmu: {
+          icon: DANMU_OPEN,
+          class: "danmu-switch-open"
+        },
+        closeDanmu: {
+          icon: DANMU_OPEN,
+          class: "danmu-switch-closed"
+        }
+      };
+    }
+  }, {
+    key: "switchState",
+    value: function switchState(isOpen) {
+      if (isOpen) {
+        this.setAttr("data-state", "active");
+      } else {
+        this.setAttr("data-state", "normal");
+      }
+      this.switchTips(isOpen);
+    }
+  }, {
+    key: "initIcons",
+    value: function initIcons() {
+      var icons = this.icons;
+      var contentIcon = this.find(".xgplayer-icon");
+      contentIcon.appendChild(icons.openDanmu);
+      contentIcon.appendChild(icons.closeDanmu);
+    }
+  }, {
+    key: "switchTips",
+    value: function switchTips(isOpen) {
+      var tipDom = this.find(".xg-tips");
+      tipDom && this.changeLangTextKey(tipDom, isOpen ? "OFF" : "OPEN");
+    }
+  }, {
+    key: "onStateChange",
+    value: function onStateChange(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var state = this.root.getAttribute("data-state");
+      var isOpen = state === "active";
+      this.switchState(!isOpen);
+      this.config.onSwitch && this.config.onSwitch(e, !isOpen);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind(["click", "touchend"], this.getMini);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var langKey = "OPEN";
+      return '\n    <xg-icon class="danmu-icon">\n      <div class="xgplayer-icon">\n      </div>\n      '.concat(xgIconTips(this, langKey, this.playerConfig.isHideTips), "\n    </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "danmuIcon";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 11,
+        onSwitch: function onSwitch(event, state) {
+        }
+      };
+    }
+  }]);
+  return DanmuIcon2;
+}(Plugin);
+export { DanmuIcon as default };

package/es/plugins/danmu/danmuPanel.d.ts

@@ -0,0 +1,39 @@
+export default DanmuPanel;
+export type IDanmuPanelConfig = {
+    position?: string;
+    index?: number;
+    onChangeSet?: () => any;
+    speed?: number;
+    area?: any;
+    opacity?: number;
+    fonSize?: number;
+};
+/**
+  * @typedef {{
+  *   position?: string,
+  *   index?: number,
+  *   onChangeSet?: () => any,
+  *   speed?: number,
+  *   area?: any,
+  *   opacity?: number,
+  *   fonSize?: number
+  * }} IDanmuPanelConfig
+  */
+declare class DanmuPanel extends Plugin {
+    /**
+     * @type IDanmuPanelConfig
+     */
+    static get defaultConfig(): IDanmuPanelConfig;
+    constructor(args: any);
+    set: {
+        speed: number;
+        area: {};
+        opacity: number;
+        fonSize: string;
+    };
+    activeEvent: string;
+    onStateChange(e: any): void;
+    onToggle(e: any): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/danmu/danmuPanel.js

@@ -0,0 +1,81 @@
+import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import sniffer from "../../utils/sniffer.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+import PanelIcon from "../assets/panel.js";
+var DanmuPanel = /* @__PURE__ */ function(_Plugin) {
+  _inherits(DanmuPanel2, _Plugin);
+  var _super = _createSuper(DanmuPanel2);
+  function DanmuPanel2(args) {
+    var _this;
+    _classCallCheck(this, DanmuPanel2);
+    _this = _super.call(this, args);
+    _this.set = {
+      speed: 1,
+      area: {},
+      opacity: 1,
+      fonSize: "middle"
+    };
+    return _this;
+  }
+  _createClass(DanmuPanel2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      if (sniffer.device === "mobile") {
+        this.activeEvent = "click";
+      } else {
+        this.activeEvent = "mouseenter";
+      }
+      this.onStateChange = this.onStateChange.bind(this);
+      this.onToggle = this.onToggle.bind(this);
+      this.bind(this.activeEvent, this.onToggle);
+      this.bind("mouseleave", this.onToggle);
+      this.appendChild(".xgplayer-panel-icon", PanelIcon());
+    }
+  }, {
+    key: "onStateChange",
+    value: function onStateChange(e) {
+      this.config.onChangeSet && this.config.onChangeSet(this.set);
+    }
+  }, {
+    key: "onToggle",
+    value: function onToggle(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      util.hasClass(this.root, "slider-show") ? util.removeClass(this.root, "slider-show") : util.addClass(this.root, "slider-show");
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.unbind(["click", "touchend"], this.onStateChange);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return '\n      <xg-icon class="xgplayer-panel">\n          <xg-panel-icon class="xgplayer-panel-icon">\n          </xg-panel-icon>\n          <xg-panel-slider class="xgplayer-panel-slider">\n            <xg-hidemode class="xgplayer-hidemode">\n              <p class="xgplayer-hidemode-font">\u5C4F\u853D\u7C7B\u578B</p>\n              <ul class="xgplayer-hidemode-radio">\n                <li class="xgplayer-hidemode-scroll" id="false">\u6EDA\u52A8</li><li class="xgplayer-hidemode-top" id="false">\u9876\u90E8</li><li class="xgplayer-hidemode-bottom" id="false">\u5E95\u90E8</li><li class="xgplayer-hidemode-color" id="false">\u8272\u5F69</li>\n              </ul>\n            </xg-hidemode>\n            <xg-transparency class="xgplayer-transparency">\n              <span>\u4E0D\u900F\u660E\u5EA6</span>\n              <input class="xgplayer-transparency-line xgplayer-transparency-color xgplayer-transparency-bar xgplayer-transparency-gradient" type="range" min="0" max="100" step="0.1" value="50"></input>\n            </xg-transparency>\n            <xg-showarea class="xgplayer-showarea">\n              <div class="xgplayer-showarea-name">\u663E\u793A\u533A\u57DF</div>\n              <div class="xgplayer-showarea-control">\n                <div class="xgplayer-showarea-control-up">\n                  <span class="xgplayer-showarea-control-up-item xgplayer-showarea-onequarters">1/4</span>\n                  <span class="xgplayer-showarea-control-up-item xgplayer-showarea-twoquarters selected-color">1/2</span>\n                  <span class="xgplayer-showarea-control-up-item xgplayer-showarea-threequarters">3/4</span>\n                  <span class="xgplayer-showarea-control-up-item xgplayer-showarea-full">1</span>\n                </div>\n                <div class="xgplayer-showarea-control-down">\n                  <div class="xgplayer-showarea-control-down-dots">\n                    <span class="xgplayer-showarea-onequarters-dot"></span>\n                    <span class="xgplayer-showarea-twoquarters-dot"></span>\n                    <span class="xgplayer-showarea-threequarters-dot"></span>\n                    <span class="xgplayer-showarea-full-dot"></span>\n                  </div>\n                  <input class="xgplayer-showarea-line xgplayer-showarea-color xgplayer-showarea-bar xgplayer-gradient" type="range" min="1" max="4" step="1" value="1">\n                </div>\n              </div>\n            </xg-showarea>\n            <xg-danmuspeed class="xgplayer-danmuspeed">\n              <div class="xgplayer-danmuspeed-name">\u5F39\u5E55\u901F\u5EA6</div>\n              <div class="xgplayer-danmuspeed-control">\n                <div class="xgplayer-danmuspeed-control-up">\n                  <span class="xgplayer-danmuspeed-control-up-item xgplayer-danmuspeed-small">\u6162</span>\n                  <span class="xgplayer-danmuspeed-control-up-item xgplayer-danmuspeed-middle selected-color">\u4E2D</span>\n                  <span class="xgplayer-danmuspeed-control-up-item xgplayer-danmuspeed-large">\u5FEB</span>\n                </div>\n                <div class="xgplayer-danmuspeed-control-down">\n                  <div class="xgplayer-danmuspeed-control-down-dots">\n                    <span class="xgplayer-danmuspeed-small-dot"></span>\n                    <span class="xgplayer-danmuspeed-middle-dot"></span>\n                    <span class="xgplayer-danmuspeed-large-dot"></span>\n                  </div>\n                  <input class="xgplayer-danmuspeed-line xgplayer-danmuspeed-color xgplayer-danmuspeed-bar xgplayer-gradient" type="range" min="50" max="150" step="50" value="100">\n                </div>\n              </div>\n            </xg-danmuspeed>\n            <xg-danmufont class="xgplayer-danmufont">\n              <div class="xgplayer-danmufont-name">\u5B57\u4F53\u5927\u5C0F</div>\n              <div class="xgplayer-danmufont-control">\n                <div class="xgplayer-danmufont-control-up">\n                  <span class="xgplayer-danmufont-control-up-item xgplayer-danmufont-small">\u5C0F</span>\n                  <span class="xgplayer-danmufont-control-up-item xgplayer-danmufont-middle">\u4E2D</span>\n                  <span class="xgplayer-danmufont-control-up-item xgplayer-danmufont-large selected-color">\u5927</span>\n                </div>\n                <div class="xgplayer-danmufont-control-down">\n                  <div class="xgplayer-danmufont-control-down-dots">\n                    <span class="xgplayer-danmufont-small-dot"></span>\n                    <span class="xgplayer-danmufont-middle-dot"></span>\n                    <span class="xgplayer-danmufont-large-dot"></span>\n                  </div>\n                  <input class="xgplayer-danmufont-line xgplayer-danmufont-color xgplayer-danmufont-bar xgplayer-gradient" type="range" min="20" max="30" step="5" value="25">\n                </div>\n              </div>\n            </xg-danmufont>\n          </xg-panel-slider>\n      </xg-icon>';
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "danmuPanel";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_RIGHT,
+        index: 11,
+        onChangeSet: function onChangeSet(set) {
+          console.log("DanmuPanel:".concat(set));
+        },
+        speed: 1,
+        area: {},
+        opacity: 1,
+        fonSize: "middle"
+      };
+    }
+  }]);
+  return DanmuPanel2;
+}(Plugin);
+export { DanmuPanel as default };