feat: define commander base class

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

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../utils/eventmitter';
+import { Danma, Commander } from '../types';
+import Track from '../track';
+
+export default abstract class Base<T extends Danma> extends EventEmitter {
+  protected trackHeight: number;
+
+  protected duration: number;
+
+  protected trackCnt: number;
+
+  protected tracks: Track<T>[] = [];
+
+  waitingQueue: T[] = [];
+
+  constructor(config: Commander) {
+    super();
+    this.trackHeight = config.trackHeight;
+    this.duration = config.duration;
+    this.trackCnt = config.trackCnt;
+
+    for (let i = 0; i < config.trackCnt; ++i) {
+      this.tracks[i] = new Track();
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import RollingCommander from './rolling';
+
+export { RollingCommander };

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

@@ -0,0 +1,7 @@
+class RollingCommander {
+  constructor() {
+    console.log(1111);
+  }
+}
+
+export default RollingCommander;

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

@@ -1,12 +1,14 @@
 import { EventEmitter } from './utils/eventmitter';
 import { addDispose, dispose, Dispose } from './utils/dispose';
+import { RollingCommander } from './commander';
 import { getEle } from './utils/dom';
 import { DanmakuOptions } from './types';
 
 const defaultOpts: DanmakuOptions = {
-  tracks: 4,
+  tracksCnt: 4,
   trackHeight: 20 * 1.5,
   fontSize: 20,
+  duration: 5000,
 };
 
 type DanmakuOptionsInit = Partial<DanmakuOptions>;
@@ -23,15 +25,15 @@ export class Danmaku extends EventEmitter implements Dispose {
 
     this.el = getEle(container);
 
-    if (!this.el) throw new Error('The container element you are currently passing in is not an HTML element');
+    if (!this.el) {
+      console.error('The container element you are currently passing in is not an HTML element.');
+      return;
+    }
 
     // pointer-events 避免容器阻碍下层点击
     this.el.style.pointerEvents = 'none';
 
-    // TODO test
-    const child = document.createElement('div');
-    child.innerHTML = 'Hello i am danma';
-    this.el.appendChild(child);
+    const rollingCommander = new RollingCommander();
   }
 
   dispose(): void {

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

@@ -0,0 +1,37 @@
+import { Danma } from './types';
+
+interface TrackForEachHandler<T extends Danma> {
+  (track: T, index: number, array: T[]): void;
+}
+
+export default class Track<T extends Danma> {
+  danmas: T[] = [];
+
+  offset = 0;
+
+  forEach(handler: TrackForEachHandler<T>) {
+    for (let i = 0; i < this.danmas.length; ++i) {
+      handler(this.danmas[i], i, this.danmas);
+    }
+  }
+
+  push(...items: T[]) {
+    this.danmas.push(...items);
+  }
+
+  removeTop() {
+    this.danmas.shift();
+  }
+
+  remove(index: number) {
+    if (index < 0 || index >= this.danmas.length) {
+      return;
+    }
+    this.danmas.splice(index, 1);
+  }
+
+  reset() {
+    this.danmas = [];
+    this.offset = 0;
+  }
+}

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

@@ -1,5 +1,16 @@
 export interface DanmakuOptions {
-  tracks: number;
+  tracksCnt: number;
   trackHeight: number;
   fontSize: number;
+  duration: number;
+}
+
+export interface Danma {
+  text: string;
+}
+
+export interface Commander {
+  trackHeight: number;
+  duration: number;
+  trackCnt: number;
 }