feat: add fixed top danmu

fixtures/qier-player-danmaku/index.js

@@ -145,7 +145,7 @@ window.onload = function () {
   const genDanmu = (time, danmu) => {
     if (!danmu) return;
     setTimeout(() => {
-      danmaku.add(danmu, 'fixed-bottom');
+      danmaku.add(danmu, 'fixed-top');
     }, time);
   };
 

packages/qier-player-danmaku/src/main/commander/fixed-top.ts

@@ -0,0 +1,39 @@
+import { TIME_PER_FRAME } from '../constants';
+import { Danmaku } from '../danmaku';
+import type { Commander, DanmakuOptionsInit } from '../types';
+import BaseFixed from './base-fixed';
+
+class FixedTopCommander extends BaseFixed {
+  constructor(readonly danmaku: Danmaku, el: HTMLElement, config: Commander, options: DanmakuOptionsInit) {
+    super(danmaku, el, config, options);
+  }
+
+  render(): void {
+    this.extractDanmu();
+    const objToElm = this.objToElm;
+    const trackHeight = this.trackHeight;
+    this.each((track, trackIdx) => {
+      const danmu = track.danmus[0];
+      if (!danmu) {
+        return;
+      }
+      const danmuDom = objToElm.get(danmu);
+      if (!danmuDom) {
+        return;
+      }
+      if (danmu.static) {
+        return;
+      }
+      const { offset } = danmu;
+      const y = trackIdx * trackHeight;
+      danmuDom.style.transform = `translate(${offset}px, ${y}px)`;
+      danmu.duration -= TIME_PER_FRAME;
+      if (danmu.duration <= 0) {
+        this.removeElementFromTrack(track, 0);
+        track.remove(0);
+      }
+    });
+  }
+}
+
+export default FixedTopCommander;

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

@@ -15,6 +15,7 @@ import type {
   CommanderMapKey,
   FixedDanmu,
 } from './types';
+import FixedTopCommander from './commander/fixed-top';
 
 const defaultOpts: DanmakuOptions = {
   tracksCnt: 6,
@@ -57,6 +58,7 @@ export class Danmaku extends EventEmitter implements Dispose {
     this.commanderMap = {
       rolling: new RollingCommander(this, this.el, commanderConfig, this.opts),
       'fixed-bottom': new FixedBottomCommander(this, this.el, commanderConfig, this.opts),
+      'fixed-top': new FixedTopCommander(this, this.el, commanderConfig, this.opts),
     };
 
     this.resize();

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

@@ -41,7 +41,7 @@ export interface Commander {
 
 export interface CommanderMap {
   rolling: Base<RollingDanmu>;
-  // 'fixed-top': Base<FixedBarrageObejct>
+  'fixed-top': Base<FixedDanmu>;
   'fixed-bottom': Base<FixedDanmu>;
 }