feat: findTrack strategy code

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

@@ -2,7 +2,13 @@ import { EventEmitter } from '../utils/eventmitter';
 import { Danmu, Commander } from '../types';
 import Track from '../track';
 
+interface EachCommanderHandler<T extends Danmu> {
+  (track: Track<T>, index: number, array: Track<T>[]): void;
+}
+
 export default abstract class Base<T extends Danmu> extends EventEmitter {
+  protected trackWidth: number;
+
   protected trackHeight: number;
 
   protected duration: number;
@@ -16,6 +22,7 @@ export default abstract class Base<T extends Danmu> extends EventEmitter {
   constructor(config: Commander) {
     super();
 
+    this.trackWidth = config.trackWidth;
     this.trackHeight = config.trackHeight;
     this.duration = config.duration;
     this.trackCnt = config.trackCnt;
@@ -25,11 +32,23 @@ export default abstract class Base<T extends Danmu> extends EventEmitter {
     }
   }
 
+  /**
+   * 遍历所有轨道并回调
+   */
+  each(handler: EachCommanderHandler<T>) {
+    for (let i = 0; i < this.tracks.length; ++i) {
+      handler(this.tracks[i], i, this.tracks);
+    }
+  }
+
   /**
    * resize
    * @param {Number} [height] 每个轨道高度
    */
-  resize(height?: number) {
+  resize(width?: number, height?: number) {
+    if (width) {
+      this.trackWidth = width;
+    }
     if (height) {
       this.trackHeight = height;
     }
@@ -46,20 +65,20 @@ export default abstract class Base<T extends Danmu> extends EventEmitter {
    * 寻找合适的轨道
    * @return {Number} 合适轨道的下标
    */
-  abstract _findTrack(): number;
+  abstract findTrack(): number;
 
   /**
    * 从等待队列中抽取弹幕并放入弹幕
    */
-  abstract _extractBarrage(): void;
+  abstract extractBarrage(): void;
 
   /**
    * 渲染函数
    */
   abstract render(): void;
 
   /**
-   * 重置
+   * 重置清空
    */
   abstract reset(): void;
 }

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

@@ -2,19 +2,36 @@ import BaseRolling from './base-rolling';
 import { RollingDanmu, Commander } from '../types';
 
 class RollingCommander extends BaseRolling<RollingDanmu> {
-  // constructor(el: HTMLElement, config: CommanderConfig) {
-  //   super(el, config);
-  // }
-
   add(danmu: RollingDanmu): boolean {
+    const trackId = this.findTrack();
+    if (trackId === -1) {
+      return false;
+    }
+
+    // TODO 创建弹幕DOM
     return true;
   }
 
-  _findTrack(): number {
-    return 1;
+  findTrack(): number {
+    const failCode = -1;
+    let idx = failCode;
+    let max = -Infinity;
+    this.each((track, index) => {
+      const trackOffset = track.offset;
+      if (trackOffset > this.trackWidth) {
+        return failCode;
+      }
+      const t = this.trackWidth - trackOffset;
+      // 策略为找到剩余空间最大的轨道进行插入
+      if (t > max) {
+        idx = index;
+        max = t;
+      }
+    });
+    return idx;
   }
 
-  _extractBarrage(): void {
+  extractBarrage(): void {
     console.log('_extractBarrage');
   }
 

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

@@ -2,6 +2,7 @@ import { EventEmitter } from './utils/eventmitter';
 import { addDispose, dispose, Dispose } from './utils/dispose';
 import { RollingCommander } from './commander';
 import { getEle } from './utils/dom';
+import { requestAnimationFrame, cancelAnimationFrame } from './utils/common';
 import strategy from './strategy';
 import Base from './commander/base';
 import { Commander, DanmakuOptions, RawDanmu, RollingDanmu, CommanderMap, CommanderMapKey } from './types';
@@ -45,6 +46,7 @@ export class Danmaku extends EventEmitter implements Dispose {
 
     const commanderConfig: Commander = {
       trackCnt: this.opts.tracksCnt,
+      trackWidth: this.el.offsetWidth,
       trackHeight: this.opts.trackHeight,
       duration: this.opts.duration,
     };
@@ -71,19 +73,22 @@ export class Danmaku extends EventEmitter implements Dispose {
     this.rAFId = null;
   }
 
-  private traversalManager(handler: (commander: Base<RollingDanmu>) => any) {
+  private eachManager(handler: (commander: Base<RollingDanmu>) => any) {
     if (!this.commanderMap) return;
     Object.keys(this.commanderMap).forEach((key) => handler.call(this, this.commanderMap![key as CommanderMapKey]));
   }
 
   private render() {
     // 遍历每个 commander 执行它们各自的 render 方法
-    this.traversalManager((manager) => manager.render());
+    this.eachManager((manager) => manager.render());
 
     this.rAFId = requestAnimationFrame(this.render.bind(this));
   }
 
   dispose(): void {
-    this.el = null!;
+    if (!this.el) return;
+    this.el = null;
+    dispose(this);
+    this.removeAllListeners();
   }
 }

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

@@ -17,14 +17,16 @@ const strategy: Strategy = {
     const { text, color = danmaku.opts.fontColor, size = danmaku.opts.fontSize } = rowDanmu;
     const fontColor = color;
     const fontSize = size * danmaku.opts.zoom;
-    // const trackWidth = danmaku.el!.offsetWidth;
+    const trackWidth = danmaku.el!.offsetWidth;
 
     if (type === 'rolling') {
       const danmu: RollingDanmu = {
         text,
         color: fontColor,
         size: fontSize,
         speed: 0,
+        width: 0,
+        offset: trackWidth,
       };
       danmaku.commanderMap[type].waitingQueue.push(danmu);
     } else {

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

@@ -1,4 +1,5 @@
 import { Danmu } from './types';
+import { isRollingDanmu } from './utils/is';
 
 interface TrackForEachHandler<T extends Danmu> {
   (track: T, index: number, array: T[]): void;
@@ -30,6 +31,14 @@ export default class Track<T extends Danmu> {
     this.danmus.splice(index, 1);
   }
 
+  updateOffset() {
+    const lastDanmu = this.danmus[this.danmus.length - 1];
+    if (lastDanmu && isRollingDanmu(lastDanmu)) {
+      const { speed } = lastDanmu;
+      this.offset -= speed;
+    }
+  }
+
   reset() {
     this.danmus = [];
     this.offset = 0;

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

@@ -21,6 +21,8 @@ export interface Danmu {
   text: string;
   color: string;
   size: number;
+  width: number;
+  offset: number;
 }
 
 export interface RollingDanmu extends Danmu {
@@ -32,6 +34,7 @@ export interface FixedDanmu extends Danmu {
 }
 
 export interface Commander {
+  trackWidth: number;
   trackHeight: number;
   duration: number;
   trackCnt: number;

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

@@ -0,0 +1,3 @@
+export const requestAnimationFrame = window.requestAnimationFrame || (window as any).webkitRequestAnimationFrame;
+
+export const cancelAnimationFrame = window.cancelAnimationFrame || (window as any).webkitCancelAnimationFrame;

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

@@ -1,3 +1,5 @@
+import { RollingDanmu } from '../types';
+
 const { toString } = Object.prototype;
 
 export function isString(o: any): o is string {
@@ -21,3 +23,7 @@ export function isHTMLElement(o: any): o is HTMLElement {
     ? o instanceof HTMLElement
     : o && typeof o === 'object' && o.nodeType === 1 && typeof o.nodeName === 'string';
 }
+
+export function isRollingDanmu(o: any): o is RollingDanmu {
+  return Object.prototype.hasOwnProperty.call(o, 'speed') && Object.prototype.hasOwnProperty.call(o, 'offset');
+}