@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/plugins/inner/common/danmu/index.ts

@@ -0,0 +1,683 @@
+import { Plugin, Sniffer, Events } from 'xgplayer';
+import openIcon from '../../../../assets/icons/pc/danmuActive.svg';
+import closeIcon from '../../../../assets/icons/pc/danmu.svg';
+import resetIcon from '../../../../assets/icons/pc/reset.svg';
+import helpers from 'dom-helpers';
+import Slider from './slider';
+import State from './state';
+import Container from './container';
+import Panel from './panel';
+import Switch from './switch';
+import type { SwitchInstance } from './switch';
+import EventEmitter from 'eventemitter3';
+import debounce from 'lodash-es/debounce';
+import { PluginEvents } from '@/constants/event';
+import { CONTROL_ICON_INDEX } from '@/constants/plugin';
+
+declare global {
+  interface Window {
+    DanmuMask?: any;
+  }
+}
+
+/**
+ * @brief 弹幕配置。
+ * @list Options
+ * @kind property
+ */
+/** {en}
+ * @list Options
+ * @kind property
+ */
+export interface IDanmuConfig {
+  /**
+   * @brief 弹幕透明度。取值如下：
+   *
+   *        - `0`：透明度 0。
+   *        - `33`：透明度 33%。
+   *        - `66`：透明度 66%。
+   *        - `99`：透明度 100%。
+   * @default 99
+   */
+  /** {en}
+   * @brief 透明度, 枚举值[0, 33, 66, 99], 实际对应0, 0.33, 0.66, 1
+   */
+  opacity?: number;
+  /**
+   * @brief 弹幕区域大小。取值如下：
+   *
+   *        - `0`：弹幕区域占全屏的 1/4。
+   *        - `33`：弹幕区域占全屏的 1/2。
+   *        - `66`：弹幕区域占全屏的 3/4。
+   *        - `99`：弹幕区域占满全屏。
+   * @default 99
+   */
+  /** {en}
+   * @brief 枚举值[0, 33, 66, 99] 实际对应1/4, 1/2, 3/4, 1
+   */
+  area?: number;
+  /**
+   * @brief 弹幕滚动速度。取值如下：
+   *
+   *        - `0`：弹幕速度为 1/4。
+   *        - `20`：弹幕速度为 1/2。
+   *        - `40`：弹幕速度为 1。
+   *        - `60`：弹幕速度为 5/4。
+   *        - `80`：弹幕速度为 3/2。
+   *        - `100`：弹幕速度为 2。
+   * @default 40
+   */
+  /** {en}
+   * @brief 速度, 枚举值[0, 20, 40, 60, 80, 100]， 实际对应1/4, 1/2,1,5/4,3/2,2
+   */
+  speed?: number;
+  /**
+   * @brief 弹幕字体大小。取值如下：
+   *
+   *        - `0`：字体大小为 14 px。
+   *        - `50`：字体大小为 16 px。
+   *        - `100`：字体大小为 20 px。
+   * @default 50
+   */
+  /** {en}
+   * @brief 字体大小， 枚举值[0, 50, 100]，实际对应14px 16px 20px
+   */
+  fontSize?: number;
+  /**
+   * @brief 是否默认开启弹幕。取值如下：
+   *
+   *        - `false`：关闭。
+   *        - `true`：开启。
+   * @default false
+   */
+  /** {en}
+   * @brief 是否默认开启弹幕
+   */
+  active?: boolean;
+  /**
+   * @brief 是否展示弹幕设置面板。取值如下：
+   *
+   *        - `false`：不展示弹幕设置面板。
+   *        - `true`：展示弹幕设置面板。
+   * @default true
+   * @hidden
+   */
+  /** {en}
+   * @brief Whether to enable barrage by default
+   */
+  usePanel?: boolean;
+  /**
+   * @brief 弹幕列表。
+   * @default -
+   */
+  /** {en}
+   * @brief 弹幕列表
+   */
+  danmuItems?: DanmuItem[];
+  /**
+   * @hidden
+   * @type {ExternalItem[]}
+   * @memberof IDanmuConfig
+   */
+  external?: ExternalItem[];
+  /**
+   * @brief 蒙版弹幕配置
+   * @default -
+   */
+  maskConfig?: IMaskConfig;
+  /**
+   * @brief 是否开启蒙版弹幕，即对应智能挡板开关
+   * @default false
+   */
+  maskActive?: boolean;
+}
+
+interface IMaskConfig {
+  maskUrl: string;
+  maskOffset?: number;
+  interval?: number;
+}
+
+/** {zh}
+ * @hidden
+ * @brief 语言类型
+ */
+/** {en}
+ * @hidden
+ * @brief 语言类型
+ */
+interface Lang {
+  zh: string;
+  en: string;
+  [props: string]: string;
+}
+/** {zh}
+ * @brief 弹幕项
+ * @list Options
+ * @kind property
+ * @export
+ * @interface DanmuItem
+ */
+/** {en}
+ * @list Options
+ * @kind property
+ * @export
+ * @interface DanmuItem
+ * @brief 弹幕项
+ */
+export interface DanmuItem {
+  /**
+   * 弹幕唯一id
+   *
+   * @type {string}
+   * @memberof DanmuItem
+   * @brief 弹幕唯一 ID。
+   */
+  /** {en}
+   * @brief 弹幕唯一id
+   */
+  id: string;
+  /**
+   * 弹幕文案
+   *
+   * @type {string}
+   * @memberof DanmuItem
+   * @brief 弹幕文案。
+   */
+  /** {en}
+   * @brief 弹幕文案
+   */
+  txt: string;
+  /**
+   * 弹幕出现时间, 单位为ms
+   * @default 0
+   * @brief 弹幕出现时间，单位为毫秒。
+   */
+  /** {en}
+   * @brief 弹幕出现时间, 单位为ms
+   */
+  start?: number; // 弹幕出现时间 ms
+  /**
+   * 是否优先显示
+   * @hidden
+   * @type {boolean}
+   * @memberof DanmuItem
+   */
+  prior?: boolean; // 优先显示
+  /**
+   * 弹幕持续显示时间, 单位为ms
+   * @default 5000
+   *
+   * @type {number}
+   * @memberof DanmuItem
+   * @brief 弹幕持续显示时长，单位为毫秒。
+   */
+  /** {en}
+   * @brief 弹幕持续显示时间, 单位为ms
+   */
+  duration?: number;
+  /**
+   * @brief 弹幕样式。示例如下：`style : { color: '#ff9500', fontSize: '20px', padding: '2px 11px'}`
+   * @example
+   * ``` javascript
+   * {
+   *    color: '#ff9500',
+   *    fontSize: '20px',
+   *    padding: '2px 11px'
+   * }
+   *```
+   * @type {Partial<Record<Property, string>>}
+   * @memberof DanmuItem
+   */
+  /** {en}
+   * @brief 弹幕样式
+   */
+  style?: CSSStyleDeclaration;
+}
+// 主题样式
+export interface ExternalItem {
+  key: string;
+  name: string;
+  value: boolean;
+  lang?: Lang;
+}
+
+// 数值配置
+export interface SliderItemProps {
+  key: string;
+  name: string;
+  defaultValue: number;
+  ticks: Tick[];
+}
+//
+export interface Tick {
+  name: string;
+  val: number;
+  renderVal: number;
+}
+
+const isPC = Sniffer.device === 'pc';
+const MIN_INTERVAL = 300;
+const { POSITIONS } = Plugin;
+
+export default class DanmuPlugin extends Plugin {
+  // 播放器值
+
+  public iconWrap: HTMLElement;
+  public tipsWrap: HTMLElement;
+  public panel: Panel;
+  public container: Container;
+  public state: State;
+  public mask: any;
+  public seekCost = window.performance.now();
+
+  public eventBus = new EventEmitter();
+
+  /** 移动端 - 设置panel里的弹幕开关 */
+  public danmuSwitchInSettingPanel: SwitchInstance;
+  static get pluginName() {
+    return 'DanmuPlugin';
+  }
+
+  static get defaultConfig() {
+    return {
+      position: POSITIONS.CONTROLS_RIGHT,
+      index: CONTROL_ICON_INDEX.DanmuPlugin,
+    };
+  }
+  constructor(args: any) {
+    super(args);
+    // 依赖全局的danmu.js
+    if (!window['danmu.js']) return;
+
+    this.state = new State(args.config);
+    this.state.updateLang(this.player.lang);
+    this.iconWrap = document.createElement('div');
+    helpers.addClass(this.iconWrap, 'icon-warp');
+    this.tipsWrap = document.createElement('div');
+    helpers.addClass(this.tipsWrap, 'tips-wrap');
+
+    this.container = new Container(this.state, this.player);
+    this.panel = new Panel(this.state);
+  }
+
+  afterCreate() {
+    this.player.root?.appendChild(this.container.root);
+    this.renderIcon();
+    this.renderBox();
+    this.root.appendChild(this.iconWrap);
+
+    // pc端需要render tips 且 panel要挂载到danmu dom 下
+    if (isPC) {
+      // 使用设置面板
+      if (this.state.getConfig().usePanel) {
+        this.root.appendChild(this.panel.root);
+      }
+      this.renderTips();
+      helpers.addClass(this.panel.root, 'pc-panel');
+      this.root.appendChild(this.tipsWrap);
+    }
+
+    this.initEvents();
+    this.container.initDanmuContainer();
+  }
+
+  afterPlayerInit() {
+    // 初始化弹幕蒙版
+    this.initDanmuMask();
+  }
+
+  updateLang(lang: string): void {
+    this.state.updateLang(this.player.lang);
+    this.eventBus.emit('updateLang');
+  }
+
+  registerIcons() {
+    return {
+      open: {
+        icon: openIcon,
+        class: 'xgplayer-danmu-open-svg',
+      },
+      close: {
+        icon: closeIcon,
+        class: 'xgplayer-danmu-close-svg',
+      },
+      reset: {
+        icon: resetIcon,
+        class: 'xgplayer-danmu-reset-svg',
+      },
+    };
+  }
+
+  initEvents() {
+    if (isPC) {
+      this.bindPCEvent();
+    } else {
+      //
+      this.bindMobileEvent();
+    }
+    this.bindPlayerEvent();
+  }
+
+  start() {
+    if (!this.container) {
+      return;
+    }
+    this.container.start();
+    if (this.player.paused) {
+      this.container.pause();
+    }
+  }
+
+  bindPlayerEvent() {
+    const active = this.state.getConfig()?.active;
+    this.once(Events.TIME_UPDATE, () => {
+      active && this.start();
+    });
+    this.on(Events.PAUSE, () => {
+      this.container.pause();
+    });
+    this.on(Events.PLAY, () => {
+      this.container.play();
+    });
+    this.on(Events.SEEKING, () => {
+      this.seekCost = window.performance.now();
+      this.container.stop();
+    });
+    this.on(
+      Events.SEEKED,
+      debounce(() => {
+        this.container.start();
+      }, MIN_INTERVAL),
+    );
+    this.on(
+      [
+        Events.FULLSCREEN_CHANGE,
+        Events.CSS_FULLSCREEN_CHANGE,
+        Events.MINI_STATE_CHANGE,
+      ],
+      () => {
+        this.container.resize();
+        this.handleResize();
+      },
+    );
+
+    this.on(Events.PIP_CHANGE, this.handlePIP.bind(this));
+  }
+
+  bindPCEvent() {
+    helpers.addEventListener(this.root, 'click', this.onClick.bind(this));
+    helpers.addEventListener(this.root, 'mouseenter', () => {
+      const active = this.state.getConfig().active;
+      const { controls } = this.player;
+      const { listType } = this.config;
+      listType === 'rightSide' ? controls.blur() : controls.focus();
+      if (active) {
+        helpers.style(this.panel.root, { display: 'block' });
+        helpers.style(this.tipsWrap, { display: 'none' });
+      } else {
+        helpers.style(this.panel.root, { display: 'none' });
+        helpers.style(this.tipsWrap, { display: 'block' });
+      }
+    });
+    helpers.addEventListener(this.root, 'mouseleave', () => {
+      const { controls } = this.player;
+      const { listType } = this.config;
+      listType === 'rightSide' ? controls.focus() : controls.focusAwhile();
+      helpers.style(this.panel.root, { display: 'none' });
+      helpers.style(this.tipsWrap, { display: 'none' });
+    });
+  }
+
+  bindMobileEvent() {
+    helpers.addEventListener(this.root, 'click', () => {
+      if (this.state.getConfig().usePanel) {
+        (this.player as any).panel.showPanel(this.panel.root);
+      } else {
+        this.onClick();
+      }
+    });
+  }
+
+  onClick() {
+    this.toggleDanmu();
+    this.renderIcon();
+  }
+
+  toggleDanmu() {
+    const { active, maskActive } = this.state.getConfig();
+    const willChange = !active;
+
+    if (willChange) {
+      this.state.updateConfig({ active: willChange });
+      if (maskActive) {
+        this.initMask();
+      }
+      this?.container.start();
+    } else {
+      this?.container.stop();
+      this.destroyMask();
+      this.state.updateConfig({ active: willChange });
+    }
+
+    this.player.emit(PluginEvents.DANMU_CHANGE, { active: willChange });
+
+    if (this.danmuSwitchInSettingPanel) {
+      this.danmuSwitchInSettingPanel.value = willChange;
+      this.danmuSwitchInSettingPanel.render();
+    }
+  }
+
+  renderIcon() {
+    this.iconWrap.innerHTML = '';
+    if (this.state.getConfig().active) {
+      this.iconWrap.appendChild((this.icons as any).open);
+    } else {
+      this.iconWrap.appendChild((this.icons as any).close);
+    }
+  }
+
+  renderTips() {
+    this.tipsWrap.innerHTML = this.state.curLangMap.openDanmu;
+  }
+
+  renderBox() {
+    this.panel.root.innerHTML = '';
+    const header = document.createElement('div');
+    helpers.addClass(header, 'box-header');
+    header.innerHTML =
+      '<div class="header-setting">' +
+      this.state.curLangMap.danmuSetting +
+      '</div> <div class="header-reset"></div>';
+    const reset = header.querySelector('.header-reset') as HTMLElement;
+    reset.appendChild((this.icons as any).reset);
+    helpers.addEventListener(
+      reset,
+      'click',
+      event => {
+        event.stopPropagation();
+        this.eventBus.emit('reset');
+      },
+      {
+        capture: true,
+      },
+    );
+    const span = document.createElement('span');
+    span.innerHTML = this.state.curLangMap.reset;
+    reset.appendChild(span);
+    this.eventBus.on('updateLang', () => {
+      span.innerHTML = this.state.curLangMap.reset;
+      header.querySelector('.header-setting').innerHTML =
+        this.state.curLangMap.danmuSetting;
+    });
+    this.panel.root.appendChild(header);
+    if (!isPC) {
+      // render turnOff
+      this.renderTurnOff();
+    }
+    this.renderSliders();
+    this.renderSwitches();
+  }
+
+  renderTurnOff() {
+    const item = {
+      name: this.state.curLangMap.danmuSwitch,
+      key: 'active',
+      value: this.state.getConfig().active || false,
+    };
+    const turnOff = new Switch(item);
+    this.danmuSwitchInSettingPanel = turnOff;
+    this.panel.root.appendChild(turnOff.root);
+    turnOff.onChange((val: boolean) => {
+      this.toggleDanmu();
+      this.renderIcon();
+    });
+    this.eventBus.on('updateLang', () => {
+      turnOff.renderName(this.state.curLangMap.danmuSwitch);
+    });
+  }
+
+  renderSwitches() {
+    this.state.getConfig().external?.forEach(item => {
+      const switchInstance = new Switch(item);
+      this.panel.root.appendChild(switchInstance.root);
+      this.eventBus.on('updateLang', () => {
+        switchInstance.renderName(item.name);
+      });
+      switchInstance.onChange((val: boolean) => {
+        const external = this.state.getConfig().external || [];
+        external.forEach(el => {
+          if (el.key === item.key) {
+            el.value = val;
+          }
+        });
+        this.state.updateConfig({ external });
+        this.player.emit(PluginEvents.DANMU_CHANGE, { external });
+      });
+    });
+  }
+
+  renderSliders() {
+    this.state.sliderItemsProps.forEach((el, index) => {
+      const line = document.createElement('div');
+
+      const slider = new Slider(line, el);
+      if (this.state.getConfig()?.[el.key] != undefined) {
+        slider.setValue(this.state.getConfig()?.[el.key]);
+      }
+
+      // slider value change
+      slider.onChange((val: number) => {
+        this.state.updateConfig({ [el.key]: val });
+        this.player.emit(PluginEvents.DANMU_CHANGE, { [el.key]: val });
+        this.container.setProperty(el.key as any, val);
+      });
+
+      this.eventBus.on('reset', () => {
+        slider.setValue(el.defaultValue);
+      });
+      this.eventBus.on('updateLang', () => {
+        slider.renderText(this.state.sliderItemsProps[index]);
+      });
+      this.panel.root.appendChild(line);
+    });
+  }
+
+  sendDanmu(item) {
+    return this.container.sendDanmu(item);
+  }
+
+  updateConfig(config = {}) {
+    return this.state.updateConfig(config);
+  }
+
+  getConfig() {
+    return this.state.getConfig();
+  }
+
+  initDanmuMask() {
+    if (!this.player) return;
+    const { maskConfig, active, maskActive } = this.state.getConfig();
+    if (!maskConfig.maskUrl) return;
+
+    // 渲染按钮
+    this.renderDanmuMaskTurnOff();
+
+    if (active && maskActive) {
+      this.initMask();
+    }
+  }
+
+  renderDanmuMaskTurnOff() {
+    const item = {
+      name: this.state.curLangMap.danmuMask,
+      key: 'maskActive',
+      value: this.state.getConfig().maskActive || false,
+    };
+    const turnOff = new Switch(item);
+    this.panel.root.appendChild(turnOff.root);
+    turnOff.onChange((val: boolean) => {
+      this.state.updateConfig({ maskActive: val });
+      if (val) {
+        this.initMask();
+      } else {
+        this.destroyMask();
+      }
+      this.renderIcon();
+    });
+    this.eventBus.on('updateLang', () => {
+      turnOff.renderName(this.state.curLangMap.danmuMask);
+    });
+  }
+
+  initMask() {
+    this.destroyMask();
+    const { maskConfig, maskActive, active } = this.state.getConfig();
+    if (!maskConfig.maskUrl) return;
+    if (!maskActive) return;
+    if (!active) return;
+    if (window.DanmuMask && typeof window.DanmuMask === 'function') {
+      this.mask = new window.DanmuMask({
+        player: this.player,
+        url: maskConfig.maskUrl,
+        originStart: maskConfig.maskOffset,
+        interval: maskConfig.interval,
+      });
+    }
+    this.mask.init();
+  }
+
+  destroyMask() {
+    if (this.mask) {
+      this.mask.destroy();
+      this.mask = null;
+    }
+  }
+
+  handleResize() {
+    if (!this.mask) return;
+    const player = this.player;
+    this.mask.setContainerSize(
+      player?.root?.offsetWidth ?? 0,
+      player?.root?.offsetHeight ?? 0,
+    );
+  }
+
+  handlePIP(state) {
+    if (state) {
+      this.destroyMask();
+    } else {
+      this.initMask();
+    }
+  }
+
+  destroy() {
+    this.destroyMask();
+    this.container.destroy();
+    this.panel.destroy();
+  }
+
+  render() {
+    return '<div class="xgplayer-danmu"></div>';
+  }
+}