feat: start, stop, render function code

vortesnail · Mar 23, 2022 · c792851 · c792851
1 parent c9dabd6
commit c792851
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/fixtures/qier-player-danmaku/index.js b/fixtures/qier-player-danmaku/index.js
@@ -1,8 +1,9 @@
 window.onload = function () {
   console.log(QierPlayer);
+  const { Player, EVENT } = QierPlayer;
   const rootEle = document.querySelector('#app');
 
-  const player = new QierPlayer.Player({
+  const player = new Player({
     src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
   });
 
@@ -23,6 +24,14 @@ window.onload = function () {
   //   });
   // }, 3000);
 
+  player.on(EVENT.PLAY, () => {
+    danmaku.start();
+  });
+
+  player.on(EVENT.PAUSE, () => {
+    danmaku.stop();
+  });
+
   danmaku.add({
     text: 'i am vortesnail',
     color: '#1890ff',

diff --git a/packages/qier-player-danmaku/src/main/danmaku.ts b/packages/qier-player-danmaku/src/main/danmaku.ts
@@ -3,7 +3,8 @@ import { addDispose, dispose, Dispose } from './utils/dispose';
 import { RollingCommander } from './commander';
 import { getEle } from './utils/dom';
 import strategy from './strategy';
-import { Commander, DanmakuOptions, RawDanmu, CommanderMap, CommanderMapKey } from './types';
+import Base from './commander/base';
+import { Commander, DanmakuOptions, RawDanmu, RollingDanmu, CommanderMap, CommanderMapKey } from './types';
 
 const defaultOpts: DanmakuOptions = {
   tracksCnt: 4,
@@ -25,6 +26,8 @@ export class Danmaku extends EventEmitter implements Dispose {
 
   commanderMap?: CommanderMap;
 
+  private rAFId: number | null = null;
+
   constructor(container: HTMLElement | string, opts?: DanmakuOptionsInit) {
     super();
 
@@ -55,6 +58,31 @@ export class Danmaku extends EventEmitter implements Dispose {
     return fn(this, danmu, type);
   }
 
+  start() {
+    if (this.rAFId) return;
+
+    this.rAFId = requestAnimationFrame(this.render.bind(this));
+  }
+
+  stop() {
+    if (!this.rAFId) return;
+
+    cancelAnimationFrame(this.rAFId);
+    this.rAFId = null;
+  }
+
+  private traversalManager(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.rAFId = requestAnimationFrame(this.render.bind(this));
+  }
+
   dispose(): void {
     this.el = null!;
   }

diff --git a/packages/qier-player-danmaku/src/main/strategy.ts b/packages/qier-player-danmaku/src/main/strategy.ts
@@ -4,7 +4,7 @@ import { RawDanmu, RollingDanmu, FixedDanmu, CommanderMapKey } from './types';
 export interface Strategy {
   clear(danmaku: Danmaku): void;
   add(danmaku: Danmaku, danmu: RawDanmu, type: CommanderMapKey): void;
-  render(danmaku: Danmaku): void;
+  // render(danmaku: Danmaku): void;
 }
 
 const strategy: Strategy = {
@@ -31,9 +31,9 @@ const strategy: Strategy = {
       console.log(1);
     }
   },
-  render(danmaku: Danmaku): void {
-    console.log(222);
-  },
+  // render(danmaku: Danmaku): void {
+  //   console.log(222, danmaku);
+  // },
 };
 
 export default strategy;