feat: add mouseover and mouseout for danmu

fixtures/qier-player-danmaku/index.js

@@ -123,7 +123,9 @@ window.onload = function () {
   player.el.appendChild(danmuWrapper);
 
   // 弹幕实例
-  const danmaku = new QierPlayerDanmaku(danmuWrapper, {});
+  const danmaku = new QierPlayerDanmaku(danmuWrapper, {
+    eventProxyElement: danmuWrapper,
+  });
 
   // setInterval(() => {
   //   danmaku.add({
@@ -153,4 +155,8 @@ window.onload = function () {
       genDanmu(Math.random() * 2 * 1000, danmu);
     }
   }, 1000);
+
+  danmaku.on('click', (danmu, ele) => {
+    console.log(danmu, ele);
+  });
 };

packages/qier-player-danmaku/src/main/commander/base-rolling.ts

@@ -2,6 +2,9 @@ import Base from './base';
 import { dispose, addDisposeListener } from '../utils/dispose';
 import type { Danmu, Commander, DanmakuOptionsInit } from '../types';
 import { removeEle } from '../utils/dom';
+import { setBlurStyle, setHoverStyle } from '../helper';
+import { EVENT } from '../constants';
+import { Danmaku } from '../danmaku';
 
 export default abstract class BaseRolling<T extends Danmu> extends Base<T> {
   el: HTMLElement;
@@ -10,24 +13,68 @@ export default abstract class BaseRolling<T extends Danmu> extends Base<T> {
 
   elmToObj: WeakMap<HTMLElement, T> = new WeakMap();
 
-  constructor(el: HTMLElement, config: Commander, options: DanmakuOptionsInit) {
+  staticDanmu: T | null = null;
+
+  constructor(readonly danmaku: Danmaku, el: HTMLElement, config: Commander, options: DanmakuOptionsInit) {
     super(config, options);
 
     this.el = el;
 
     const proxyEl = options.eventProxyElement;
     if (proxyEl) {
-      addDisposeListener(this, proxyEl, 'mousemove', this.mouseMoveEventHandler.bind(this));
+      addDisposeListener(this, proxyEl, 'mouseover', this.mouseOverEventHandler.bind(this));
+      addDisposeListener(this, proxyEl, 'mouseout', this.mouseOutEventHandler.bind(this));
       addDisposeListener(this, proxyEl, 'click', this.mouseClickEventHandler.bind(this));
     }
   }
 
-  mouseMoveEventHandler(e: Event) {
-    console.log(1);
+  mouseOverEventHandler(e: Event) {
+    const target = e.target as HTMLElement;
+    if (!target) {
+      return;
+    }
+
+    const newStaticDanmu = this.elmToObj.get(target);
+    const oldStaticDanmu = this.staticDanmu;
+
+    if (newStaticDanmu === oldStaticDanmu) {
+      return;
+    }
+
+    this.staticDanmu = null;
+
+    if (newStaticDanmu) {
+      this.staticDanmu = newStaticDanmu;
+      newStaticDanmu.static = true;
+      setHoverStyle(target);
+      this.danmaku.emit(EVENT.HOVER, newStaticDanmu, target);
+    }
+  }
+
+  mouseOutEventHandler(e: Event) {
+    const target = e.target as HTMLElement;
+    if (!target) {
+      return;
+    }
+
+    const staticDanmu = this.elmToObj.get(target);
+
+    this.staticDanmu = null;
+
+    if (staticDanmu) {
+      staticDanmu.static = false;
+      const oldStaticEle = this.objToElm.get(staticDanmu);
+      oldStaticEle && setBlurStyle(oldStaticEle);
+      this.danmaku.emit(EVENT.BLUR, staticDanmu, oldStaticEle);
+    }
   }
 
   mouseClickEventHandler(e: Event) {
-    console.log(1);
+    const target = e.target as HTMLElement;
+    const danmu = this.elmToObj.get(target);
+    if (danmu) {
+      this.danmaku.emit(EVENT.CLICK, danmu, target);
+    }
   }
 
   removeElement(target: HTMLElement) {

packages/qier-player-danmaku/src/main/constants.ts

@@ -1 +1,7 @@
 export const TIME_PER_FRAME = 16.6;
+
+export const EVENT = {
+  HOVER: 'hover',
+  BLUR: 'blur',
+  CLICK: 'click',
+};

packages/qier-player-danmaku/src/main/danmaku.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from './utils/eventmitter';
-import { addDispose, dispose, Dispose } from './utils/dispose';
+import { dispose, Dispose } from './utils/dispose';
 import { RollingCommander } from './commander';
 import { getEle } from './utils/dom';
 import { requestAnimationFrame, cancelAnimationFrame } from './utils/common';
@@ -54,7 +54,7 @@ export class Danmaku extends EventEmitter implements Dispose {
       trackWidth: this.el.offsetWidth,
     };
     this.commanderMap = {
-      rolling: new RollingCommander(this.el, commanderConfig, this.opts),
+      rolling: new RollingCommander(this, this.el, commanderConfig, this.opts),
     };
 
     this.resize();
@@ -75,6 +75,19 @@ export class Danmaku extends EventEmitter implements Dispose {
     return fn(this, danmu, type);
   }
 
+  setOpacity(opacity = 1) {
+    if (!this.el) return;
+    this.el.style.opacity = `${opacity}`;
+  }
+
+  setFontSize(zoom = 1) {
+    this.opts.zoom = zoom;
+  }
+
+  setDuration(duration: number) {
+    this.opts.duration = duration;
+  }
+
   start() {
     if (this.rAFId) return;
 

packages/qier-player-danmaku/src/main/helper.ts

@@ -15,6 +15,7 @@ export function createDanmu(
     top: '0px',
     height: `${height}px`,
     lineHeight: `${height}px`,
+    padding: '0 8px',
     color,
     fontSize: `${fontSize}px`,
     transform: `translateX(${left}px)`,
@@ -27,3 +28,14 @@ export function createDanmu(
   danmuDom.textContent = text;
   return danmuDom;
 }
+
+export function setHoverStyle(el: HTMLElement) {
+  el.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+  el.style.zIndex = '1000';
+  el.style.cursor = 'pointer';
+}
+
+export function setBlurStyle(el: HTMLElement) {
+  el.style.backgroundColor = 'transparent';
+  el.style.cursor = 'auto';
+}