xgplayer 2.32.5 → 2.32.6

package/es/plugins/danmu/index.js

@@ -0,0 +1,313 @@
+import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import DanmuJs from "danmu.js";
+import util from "../../utils/util.js";
+import { TIME_UPDATE, PAUSE, PLAY, SEEKING, VIDEO_RESIZE, SEEKED } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+import DanmuPanel from "./danmuPanel.js";
+export { default as DanmuPanel } from "./danmuPanel.js";
+import DanmuIcon from "./danmuIcon.js";
+export { default as DanmuIcon } from "./danmuIcon.js";
+var MIN_INTERVAL = 300;
+var Danmu = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Danmu2, _Plugin);
+  var _super = _createSuper(Danmu2);
+  function Danmu2(args) {
+    var _this;
+    _classCallCheck(this, Danmu2);
+    _this = _super.call(this, args);
+    _this.danmujs = null;
+    _this.danmuPanel = null;
+    _this.isOpen = false;
+    _this.seekCost = 0;
+    _this.intervalId = 0;
+    _this.isUseClose = false;
+    return _this;
+  }
+  _createClass(Danmu2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      if (this.playerConfig.isLive) {
+        this.config.isLive = true;
+      }
+      this.initDanmu();
+      this.registerExtIcons();
+      this.once(TIME_UPDATE, function() {
+        _this2.config.defaultOpen && !_this2.isUseClose && _this2.start();
+      });
+      this.on(PAUSE, function() {
+        _this2.isOpen && _this2.danmujs && _this2.danmujs.pause();
+      });
+      this.on(PLAY, function() {
+        _this2.isOpen && _this2.danmujs && _this2.danmujs.play();
+      });
+      this.on(SEEKING, function() {
+        _this2.seekCost = window.performance.now();
+        !_this2.config.isLive && _this2.danmujs && _this2.danmujs.stop();
+      });
+      this.on(VIDEO_RESIZE, function() {
+        _this2.resize();
+      });
+      this.on(SEEKED, function() {
+        if (!_this2.danmujs || !_this2.isOpen) {
+          return;
+        }
+        if (_this2.intervalId) {
+          util.clearTimeout(_this2, _this2.intervalId);
+          _this2.intervalId = null;
+        }
+        var now = window.performance.now();
+        if (now - _this2.seekCost > MIN_INTERVAL) {
+          _this2.danmujs.start();
+        } else {
+          _this2.intervalId = util.setTimeout(_this2, function() {
+            _this2.danmujs.start();
+            _this2.intervalId = null;
+          }, MIN_INTERVAL);
+        }
+      });
+    }
+  }, {
+    key: "onPluginsReady",
+    value: function onPluginsReady() {
+      var pcPlugin = this.player.plugins.pc;
+      if (pcPlugin) {
+        pcPlugin.onVideoDblClick && this.bind("dblclick", pcPlugin.onVideoDblClick);
+        pcPlugin.onVideoClick && this.bind("click", pcPlugin.onVideoClick);
+      }
+    }
+  }, {
+    key: "initDanmu",
+    value: function initDanmu() {
+      var player = this.player, config = this.config;
+      var _this$config = this.config, channelSize = _this$config.channelSize, fontSize = _this$config.fontSize, opacity = _this$config.opacity, mouseControl = _this$config.mouseControl, mouseControlPause = _this$config.mouseControlPause, area = _this$config.area, defaultOff = _this$config.defaultOff;
+      var danmuConfig = {
+        container: this.root,
+        player: player.media,
+        comments: this.config.comments,
+        live: config.isLive,
+        defaultOff,
+        area,
+        mouseControl,
+        mouseControlPause
+      };
+      if (config.ext) {
+        Object.keys(config.ext).map(function(key) {
+          danmuConfig[key] = config.ext[key];
+        });
+      }
+      var danmu = new DanmuJs(danmuConfig);
+      this.danmujs = danmu;
+      player.danmu = danmu;
+      this.setFontSize(fontSize, channelSize);
+      this.setArea(area);
+      this.resize();
+      opacity !== 1 && this.setOpacity(opacity);
+    }
+  }, {
+    key: "registerExtIcons",
+    value: function registerExtIcons() {
+      var _this3 = this;
+      var player = this.player, config = this.config;
+      if (config.panel) {
+        var panelOptions = {
+          config: {
+            onChangeset: function onChangeset(set) {
+              _this3.changeSet(set);
+            }
+          }
+        };
+        this.danmuPanel = player.controls.registerPlugin(DanmuPanel, panelOptions, DanmuPanel.pluginName);
+      }
+      var switchConfig = config.switchConfig;
+      if (!config.closeDefaultBtn) {
+        var buttonOptions = {
+          config: {
+            onSwitch: function onSwitch(event, isOpen) {
+              _this3.onSwitch(event, isOpen);
+            }
+          }
+        };
+        Object.keys(switchConfig).map(function(key) {
+          buttonOptions.config[key] = switchConfig[key];
+        });
+        this.danmuButton = player.controls.registerPlugin(DanmuIcon, buttonOptions, DanmuIcon.pluginName);
+        this.config.defaultOpen && this.danmuButton.switchState(true);
+      }
+    }
+  }, {
+    key: "changeSet",
+    value: function changeSet(set) {
+    }
+  }, {
+    key: "onSwitch",
+    value: function onSwitch(event, defaultOpen) {
+      this.emitUserAction(event, "switch_danmu", {
+        prop: "isOpen",
+        from: !defaultOpen,
+        to: defaultOpen
+      });
+      if (defaultOpen) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+  }, {
+    key: "start",
+    value: function start() {
+      var _this4 = this;
+      if (this.isOpen || !this.danmujs) {
+        return;
+      }
+      this.isUseClose = false;
+      this.show();
+      this.resize();
+      util.setTimeout(this, function() {
+        _this4.danmujs.start();
+        if (_this4.player.paused) {
+          _this4.danmujs.pause();
+        }
+        _this4.isOpen = true;
+      }, 0);
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      this.isUseClose = true;
+      if (!this.isOpen || !this.danmujs) {
+        return;
+      }
+      this.danmujs.stop();
+      this.config.isLive && this.clear();
+      this.isOpen = false;
+      this.hide();
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.danmujs && this.danmujs.clear();
+    }
+  }, {
+    key: "setCommentLike",
+    value: function setCommentLike(id, data) {
+      this.danmujs && this.danmujs.setCommentLike(id, data);
+    }
+  }, {
+    key: "setCommentDuration",
+    value: function setCommentDuration(id, duration) {
+      this.danmujs && this.danmujs.setCommentDuration(id, duration);
+    }
+  }, {
+    key: "setAllDuration",
+    value: function setAllDuration(mode, duration) {
+      this.danmujs && this.danmujs.setAllDuration(mode, duration);
+    }
+  }, {
+    key: "setCommentID",
+    value: function setCommentID(oldID, newID) {
+      this.danmujs && this.danmujs.setCommentID(oldID, newID);
+    }
+  }, {
+    key: "hideMode",
+    value: function hideMode(mode) {
+      this.danmujs && this.danmujs.hide(mode);
+    }
+  }, {
+    key: "showMode",
+    value: function showMode(mode) {
+      this.danmujs && this.danmujs.show(mode);
+    }
+  }, {
+    key: "setArea",
+    value: function setArea(area) {
+      this.danmujs && this.danmujs.setArea(area);
+    }
+  }, {
+    key: "setOpacity",
+    value: function setOpacity(opacity) {
+      this.danmujs && this.danmujs.setOpacity(opacity);
+    }
+  }, {
+    key: "setFontSize",
+    value: function setFontSize(size, channelSize) {
+      this.danmujs && this.danmujs.setFontSize(size, channelSize);
+    }
+  }, {
+    key: "resize",
+    value: function resize() {
+      this.danmujs && this.danmujs.resize();
+    }
+  }, {
+    key: "sendComment",
+    value: function sendComment(comments) {
+      this.danmujs && this.danmujs.sendComment(comments);
+    }
+  }, {
+    key: "updateComments",
+    value: function updateComments(comments, isClear) {
+      this.danmujs && this.danmujs.updateComments(comments, isClear);
+    }
+  }, {
+    key: "hideIcon",
+    value: function hideIcon() {
+      this.danmuButton && this.danmuButton.hide();
+    }
+  }, {
+    key: "showIcon",
+    value: function showIcon() {
+      this.danmuButton && this.danmuButton.show();
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.danmujs.stop();
+      this.danmujs.destroy();
+      this.danmujs = null;
+      this.player.danmu = null;
+      var danmuButton = this.danmuButton, danmuPanel = this.danmuPanel;
+      this.danmuButton && this.danmuButton.root && danmuButton.__destroy && danmuButton.__destroy();
+      this.danmuPanel && this.danmuPanel.root && danmuPanel.__destroy && danmuPanel.__destroy();
+      this.danmuButton = null;
+      this.danmuPanel = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return '<xg-danmu class="xgplayer-danmu">\n    </xg-danmu>';
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "danmu";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        comments: [],
+        area: {
+          start: 0,
+          end: 1
+        },
+        closeDefaultBtn: false,
+        defaultOff: false,
+        panel: false,
+        panelConfig: {},
+        switchConfig: {},
+        defaultOpen: true,
+        isLive: false,
+        channelSize: 24,
+        fontSize: 14,
+        opacity: 1,
+        mouseControl: false,
+        mouseControlPause: false,
+        ext: {},
+        style: {}
+      };
+    }
+  }]);
+  return Danmu2;
+}(Plugin);
+export { Danmu as default };

package/es/plugins/danmu/index.scss

@@ -0,0 +1,356 @@
+// definition
+$definitionLiColor: rgba(255, 255, 255, 0.80);
+$definitionLiActiveColor: #fff;
+$definitionNameColor: rgba(255, 255, 255, 0.80);
+$definitionNameBgColor: rgba(0, 0, 0, 0.38);
+
+// slider
+$sliderBgColor: rgba(0, 0, 0, 0.54);
+$sliderBarBgColor: rgba(255, 255, 255, 0.30);
+$sliderDragBgColor: #FA1F41;
+$sliderDragAfterBgColor: #fff;
+$sliderDragAfterShadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
+.xgplayer {
+  .danmu-icon  {
+    .danmu-switch {
+      margin:0 auto;
+      display: flex;
+      &-open {
+        display: none;
+      }
+
+      &-closed {
+        display: block;
+      }
+    }
+    &[data-state=active] {
+      .danmu-switch {
+        padding-left: 12px;
+        background-color: #f85959;
+        &-open {
+          display: block;
+        }
+
+        &-closed {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .xgplayer-danmu {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    outline: none;
+    > * {
+      position: absolute;
+      white-space: nowrap;
+    }
+
+  }
+}
+
+@mixin xgplayer($danmuHandle) {
+  .xgplayer-#{$danmuHandle}-line{
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    outline: none;
+    width: 150px;
+    height: 4px;
+    background: #aaa;
+    border-radius: 4px;
+    border-style: none;
+    margin-left: 10px;
+    margin-top: -2px;
+  }
+  .xgplayer-#{$danmuHandle}-line::-moz-focus-outer {
+    border: 0!important;
+  }
+  .xgplayer-#{$danmuHandle}-color::-webkit-slider-runnable-track{
+    outline: none;
+    width: 150px;
+    height: 4px;
+    border-radius: 4px;
+  }
+  .xgplayer-#{$danmuHandle}-color::-moz-range-track{
+    outline: none;
+    background-color: #aaa;
+    border-color: transparent;
+    cursor: pointer;
+    width: 150px;
+    height: 4px;
+    border-radius: 4px;
+  }
+  .xgplayer-#{$danmuHandle}-color::-ms-track{
+    outline: none;
+    background-color: #aaa;
+    color: transparent;
+    border-color: transparent;
+    width: 150px;
+    height: 4px;
+    border-radius: 4px;
+  }
+  .xgplayer-#{$danmuHandle}-bar::-webkit-slider-thumb{
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: 6px solid #f85959;
+    height: 6px;
+    width: 6px;
+    margin-top: -4px;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .xgplayer-#{$danmuHandle}-bar::-moz-range-thumb{
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: 6px solid #f85959;
+    height: 0;
+    width: 0;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .xgplayer-#{$danmuHandle}-bar::-ms-thumb{
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: 6px solid #f85959;
+    height: 6px;
+    width: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+}
+@mixin dot($panelContent) {
+  .xgplayer-#{$panelContent}-dot{
+    width: 3px;
+    height: 3px;
+    border: 3px solid #aaa;
+    border-radius: 50%;
+    background-color: #aaa;
+    position: relative;
+    top: 16px;
+    z-index: -1;
+  }
+}
+.xgplayer {
+  .xgplayer-panel{
+    outline: none;
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    position: relative;
+    font: {
+      size: 13px;
+    }
+    color: $definitionNameColor;
+    z-index: 36;
+    .xgplayer-panel-icon{
+      // margin-top: 14px;
+      cursor: pointer;
+      position: absolute;
+      // margin-left: 5px;
+      // top: 10px;
+    }
+  }
+  // .selected-color {
+  //   color: #f85959;
+  // }
+  .xgplayer-panel-slider{
+    z-index: 36;
+    display: none;
+    position: absolute;
+    width: 230px;
+    height: 230px;
+    background: $sliderBgColor;
+    border-radius: 1px;
+    padding: 10px 20px;
+    outline: none;
+    left: -115px;
+    bottom: 42px;
+    .xgplayer-hidemode {
+      padding-bottom: 10px;
+      &-radio li{
+        display: inline;
+        list-style: none;
+        cursor: pointer;
+      }
+      ul{
+        display: flex;
+        justify-content: space-around;
+      }
+      li{
+        margin: 0 12px;
+        font-size: 11px;
+        color: #aaa;
+      }
+      &-font{
+        margin-bottom: 10px;
+      }
+    }
+    .xgplayer-transparency{
+      display: block;
+      margin-top: 10px;
+      @include xgplayer(transparency);
+      .xgplayer-transparency-bar::-moz-range-progress {
+        outline: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        height: 4px;
+        border-radius: 4px;
+        background: linear-gradient(to right, #f85959, #f85959 100% , #aaa)
+      }
+    }
+    .xgplayer-showarea{
+      display: block;
+      margin-top: 8px;
+      &-name {
+        display: inline-block;
+        position: relative;
+        top: -10px;
+      }
+      &-control {
+        display: inline-block;
+        &-up {
+          width: 150px;
+          margin-left: 10px;
+          display: -moz-box;
+          display: -ms-flexbox;
+          display: -webkit-box;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          color: #aaa;
+        }
+        &-down {
+          position: relative;
+          top: -10px;
+        }
+        &-down-dots {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          width: 150px;
+          margin-left: 10px;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+      }
+      &-twoquarters {
+        margin-left: -6px;
+      }
+      &-threequarters {
+        margin-left: -6px;
+      }
+      &-full {
+        margin-right: 3px;
+      }
+      @include xgplayer(showarea);
+      @include dot(showarea-zero);
+      @include dot(showarea-onequarters);
+      @include dot(showarea-twoquarters);
+      @include dot(showarea-threequarters);
+      @include dot(showarea-full);
+    }
+    .xgplayer-danmuspeed{
+      display: block;
+      &-name {
+        display: inline-block;
+        position: relative;
+        top: -10px;
+      }
+      &-control {
+        display: inline-block;
+        &-up {
+          width: 150px;
+          margin-left: 10px;
+          display: -moz-box;
+          display: -ms-flexbox;
+          display: -webkit-box;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          color: #aaa;
+        }
+        &-down {
+          position: relative;
+          top: -10px;
+        }
+        &-down-dots {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          width: 150px;
+          margin-left: 10px;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+      }
+      @include xgplayer(danmuspeed);
+      @include dot(danmuspeed-small);
+      @include dot(danmuspeed-middle);
+      @include dot(danmuspeed-large);
+    }
+    .xgplayer-danmufont{
+      display: block;
+      &-name {
+        display: inline-block;
+        position: relative;
+        top: -10px;
+      }
+      &-control {
+        display: inline-block;
+        &-up {
+          width: 150px;
+          margin-left: 10px;
+          display: -moz-box;
+          display: -ms-flexbox;
+          display: -webkit-box;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          color: #aaa;
+        }
+        &-down {
+          position: relative;
+          top: -10px;
+        }
+        &-down-dots {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          width: 150px;
+          margin-left: 10px;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+      }
+      @include xgplayer(danmufont);
+      @include dot(danmufont-small);
+      @include dot(danmufont-middle);
+      @include dot(danmufont-large);
+    }
+  }
+  .slider-show .xgplayer-panel-slider{
+    display: block;
+  }
+}

package/es/plugins/definition/index.css

@@ -0,0 +1,4 @@
+.xgplayer-definition {
+  display: none;
+  cursor: pointer;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * @typedef {import('../../defaultConfig').IDefinition} IDefinition
+ */
+/**
+ * @typedef {{
+ *   position?: string,
+ *   index?: number,
+ *   list?: Array<IDefinition>,
+ *   defaultDefinition?: any,
+ *   disable?: any,
+ *   hidePortrait?: boolean,
+ *   className?: string
+ * }} IDefinitionConfig
+ */
+export default class DefinitionIcon extends OptionsIcon {
+    /**
+     * @type IDefinitionConfig
+     */
+    static get defaultConfig(): IDefinitionConfig;
+    beforeCreate(args: any): void;
+    curTime: number;
+    isPaused: boolean;
+    initDefinition(): void;
+    changeDefinitionList(list: any): void;
+    changeDefinition(to: any, from: any): void;
+    onItemClick(e: any, data: any, ...args: any[]): void;
+}
+export type IDefinition = import('../../defaultConfig').IDefinition;
+export type IDefinitionConfig = {
+    position?: string;
+    index?: number;
+    list?: Array<IDefinition>;
+    defaultDefinition?: any;
+    disable?: any;
+    hidePortrait?: boolean;
+    className?: string;
+};
+import OptionsIcon from "../common/optionsIcon";