close #161 support "addEvent" in any state

src/replay/machine.ts

@@ -102,6 +102,10 @@ export function createPlayerService(
               target: 'paused',
               actions: ['resetLastPlayedEvent', 'pause'],
             },
+            ADD_EVENT: {
+              target: 'playing',
+              actions: ['addEvent'],
+            },
           },
         },
         paused: {
@@ -118,6 +122,10 @@ export function createPlayerService(
               target: 'live',
               actions: ['startLive'],
             },
+            ADD_EVENT: {
+              target: 'paused',
+              actions: ['addEvent'],
+            },
           },
         },
         live: {
@@ -232,6 +240,9 @@ export function createPlayerService(
                 },
                 delay: event.delay!,
               });
+              if (!timer.isActive()) {
+                timer.start();
+              }
             }
           }
           return { ...ctx, events };

src/replay/timer.ts

@@ -10,7 +10,7 @@ export class Timer {
   public speed: number;
 
   private actions: actionWithDelay[];
-  private raf: number;
+  private raf: number | null = null;
   private liveMode: boolean;
 
   constructor(actions: actionWithDelay[] = [], speed: number) {
@@ -61,6 +61,7 @@ export class Timer {
   public clear() {
     if (this.raf) {
       cancelAnimationFrame(this.raf);
+      this.raf = null;
     }
     this.actions.length = 0;
   }
@@ -73,6 +74,10 @@ export class Timer {
     this.liveMode = mode;
   }
 
+  public isActive() {
+    return this.raf !== null;
+  }
+
   private findActionIndex(action: actionWithDelay): number {
     let start = 0;
     let end = this.actions.length - 1;