start to support live mode (#73)

1. add a liveMode flag to config, when liveMode is set, the timer
will keep running even though all the actions casted
2. add a public method addEvent, which will cast newly added event
in sync
3. move mouse in sync mode with the latest position info

src/replay/index.ts

@@ -69,6 +69,7 @@ export class Replayer {
       showWarning: true,
       showDebug: false,
       blockClass: 'rr-block',
+      liveMode: false,
     };
     this.config = Object.assign({}, defaultConfig, config);
 
@@ -157,6 +158,11 @@ export class Replayer {
     this.emitter.emit(ReplayerEvents.Resume);
   }
 
+  public addEvent(event: eventWithTime) {
+    const castFn = this.getCastFn(event, true);
+    castFn();
+  }
+
   private setupDom() {
     this.wrapper = document.createElement('div');
     this.wrapper.classList.add('replayer-wrapper');
@@ -424,8 +430,10 @@ export class Replayer {
         break;
       }
       case IncrementalSource.MouseMove:
-        // skip mouse move in sync mode
-        if (!isSync) {
+        if (isSync) {
+          const lastPosition = d.positions[d.positions.length - 1];
+          this.moveAndHover(d, lastPosition.x, lastPosition.y, lastPosition.id);
+        } else {
           d.positions.forEach(p => {
             const action = {
               doAction: () => {

src/replay/timer.ts

@@ -45,7 +45,7 @@ export default class Timer {
           break;
         }
       }
-      if (actions.length > 0) {
+      if (actions.length > 0 || self.config.liveMode) {
         self.raf = requestAnimationFrame(check);
       }
     }

src/types.ts

@@ -241,6 +241,7 @@ export type playerConfig = {
   showWarning: boolean;
   showDebug: boolean;
   blockClass: string;
+  liveMode: boolean;
 };
 
 export type playerMetaData = {

typings/replay/index.d.ts

@@ -22,6 +22,7 @@ export declare class Replayer {
     play(timeOffset?: number): void;
     pause(): void;
     resume(timeOffset?: number): void;
+    addEvent(event: eventWithTime): void;
     private setupDom;
     private handleResize;
     private getDelay;

typings/types.d.ts

@@ -192,6 +192,7 @@ export declare type playerConfig = {
     showWarning: boolean;
     showDebug: boolean;
     blockClass: string;
+    liveMode: boolean;
 };
 export declare type playerMetaData = {
     totalTime: number;