fix #535 add play-back event to reset mirror and replayer

src/replay/index.ts

@@ -193,6 +193,10 @@ export class Replayer {
         this.applyInput(d);
       }
     });
+    this.emitter.on(ReplayerEvents.PlayBack, () => {
+      this.firstPlayedEvent = null;
+      mirror.reset();
+    });
 
     const timer = new Timer([], config?.speed || defaultConfig.speed);
     this.service = createPlayerService(

src/replay/machine.ts

@@ -173,17 +173,21 @@ export function createPlayerService(
           }
           const neededEvents = discardPriorSnapshots(events, baselineTime);
 
+          let lastPlayedTimestamp = lastPlayedEvent?.timestamp;
+          if (
+            lastPlayedEvent?.type === EventType.IncrementalSnapshot &&
+            lastPlayedEvent.data.source === IncrementalSource.MouseMove
+          ) {
+            lastPlayedTimestamp =
+              lastPlayedEvent.timestamp +
+              lastPlayedEvent.data.positions[0]?.timeOffset;
+          }
+          if (baselineTime < (lastPlayedTimestamp || 0)) {
+            emitter.emit(ReplayerEvents.PlayBack);
+          }
+
           const actions = new Array<actionWithDelay>();
           for (const event of neededEvents) {
-            let lastPlayedTimestamp = lastPlayedEvent?.timestamp;
-            if (
-              lastPlayedEvent?.type === EventType.IncrementalSnapshot &&
-              lastPlayedEvent.data.source === IncrementalSource.MouseMove
-            ) {
-              lastPlayedTimestamp =
-                lastPlayedEvent.timestamp +
-                lastPlayedEvent.data.positions[0]?.timeOffset;
-            }
             if (
               lastPlayedTimestamp &&
               lastPlayedTimestamp < baselineTime &&

src/types.ts

@@ -489,6 +489,7 @@ export type Mirror = {
   getNode: (id: number) => INode | null;
   removeNodeFromMap: (n: INode) => void;
   has: (id: number) => boolean;
+  reset: () => void;
 };
 
 export type throttleOptions = {
@@ -577,6 +578,7 @@ export enum ReplayerEvents {
   CustomEvent = 'custom-event',
   Flush = 'flush',
   StateChange = 'state-change',
+  PlayBack = 'play-back',
 }
 
 export type MaskInputFn = (text: string) => string;

src/utils.ts

@@ -59,6 +59,9 @@ export const mirror: Mirror = {
   has(id) {
     return mirror.map.hasOwnProperty(id);
   },
+  reset() {
+    mirror.map = {};
+  },
 };
 
 // copy from underscore and modified