charlie632/feat/go to specific event

packages/rrweb/src/replay/index.ts

@@ -134,7 +134,7 @@
   private mouseTail: HTMLCanvasElement | null = null;
   private tailPositions: Array<{ x: number; y: number }> = [];
 
-  private emitter: Emitter = mitt();
+  private emitter: Emitter = mitt() as Emitter;
 
   private nextUserInteractionEvent: eventWithTime | null;
 
@@ -331,6 +331,8 @@
         this.applySelection(this.lastSelectionData);
         this.lastSelectionData = null;
       }
+
+      this.emitter.emit(ReplayerEvents.FlushEnd);
     });
     this.emitter.on(ReplayerEvents.PlayBack, () => {
       this.firstFullSnapshot = null;
@@ -525,6 +527,35 @@
     this.emitter.emit(ReplayerEvents.Start);
   }
 
+  /**
+   * Applies all events synchronously until the given event index.
+   * @param eventIndex - number
+   */
+  public replayEvent(eventIndex: number) {
+    const handleFinish = () => {
+      this.service.send('END');
+      this.emitter.off(ReplayerEvents.FlushEnd, handleFinish);
+    };
+    this.emitter.on(ReplayerEvents.FlushEnd, handleFinish);
+
+    if (this.service.state.matches('paused')) {
+      this.service.send({
+        type: 'PLAY_SINGLE_EVENT',
+        payload: { singleEvent: eventIndex },
+      });
+    } else {
+      this.service.send({ type: 'PAUSE' });
+      this.service.send({
+        type: 'PLAY_SINGLE_EVENT',
+        payload: { singleEvent: eventIndex },
+      });
+    }
+    this.iframe.contentDocument
+      ?.getElementsByTagName('html')[0]
+      ?.classList.remove('rrweb-paused');
+    this.emitter.emit(ReplayerEvents.Start);
+  }
+
   public pause(timeOffset?: number) {
     if (timeOffset === undefined && this.service.state.matches('playing')) {
       this.service.send({ type: 'PAUSE' });
@@ -558,6 +589,7 @@
     this.mediaManager.reset();
     this.config.root.removeChild(this.wrapper);
     this.emitter.emit(ReplayerEvents.Destroy);
+    this.emitter.all.clear();
   }
 
   public startLive(baselineTime?: number) {
@@ -932,7 +964,7 @@
         sn?.type === NodeType.Element &&
         sn?.tagName.toUpperCase() === 'HTML'
       ) {
         const { documentElement, head } = iframeEl.contentDocument!;
         this.insertStyleRules(
           documentElement as HTMLElement | RRElement,
           head as HTMLElement | RRElement,
@@ -951,14 +983,14 @@
     };
 
     buildNodeWithSN(mutation.node, {
       doc: iframeEl.contentDocument! as Document,
       mirror: mirror as Mirror,
       hackCss: true,
       skipChild: false,
       afterAppend,
       cache: this.cache,
     });
     afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);
 
     for (const { mutationInQueue, builtNode } of collectedIframes) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -1075,7 +1107,7 @@
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
       const imgd = ctx?.createImageData(canvas.width, canvas.height);
       ctx?.putImageData(imgd!, 0, 0);
     }
   }
   private async deserializeAndPreloadCanvasEvents(
@@ -1396,7 +1428,7 @@
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
       this.usingVirtualDom = true;
       buildFromDom(this.iframe.contentDocument!, this.mirror, this.virtualDom);
       // If these legacy missing nodes haven't been resolved, they should be converted to virtual nodes.
       if (Object.keys(this.legacy_missingNodeRetryMap).length) {
         for (const key in this.legacy_missingNodeRetryMap) {
@@ -1513,7 +1545,7 @@
         // If the parent is attached a shadow dom after it's created, it won't have a shadow root.
         if (!hasShadowRoot(parent)) {
           (parent as Element | RRElement).attachShadow({ mode: 'open' });
           parent = (parent as Element | RRElement).shadowRoot! as Node | RRNode;
         } else parent = parent.shadowRoot as Node | RRNode;
       }
 

packages/rrweb/src/replay/machine.ts

@@ -28,6 +28,12 @@
         timeOffset: number;
       };
     }
+  | {
+      type: 'PLAY_SINGLE_EVENT';
+      payload: {
+        singleEvent: number;
+      };
+    }
   | {
       type: 'CAST_EVENT';
       payload: {
@@ -78,6 +84,30 @@
   return events;
 }
 
+function discardPriorSnapshotsToEvent(
+  events: eventWithTime[],
+  targetIndex: number,
+) {
+  const targetEvent = events[targetIndex];
+
+  if (!targetEvent) {
+    return [];
+  }
+
+  for (let idx = targetIndex; idx >= 0; idx--) {
+    const event = events[idx];
+
+    if (!event) {
+      continue;
+    }
+
+    if (event.type === EventType.Meta) {
+      return events.slice(idx, targetIndex + 1);
+    }
+  }
+  return events;
+}
+
 type PlayerAssets = {
   emitter: Emitter;
   applyEventsSynchronously(events: Array<eventWithTime>): void;
@@ -119,6 +149,10 @@
               target: 'playing',
               actions: ['recordTimeOffset', 'play'],
             },
+            PLAY_SINGLE_EVENT: {
+              target: 'playing',
+              actions: ['playSingleEvent'],
+            },
             CAST_EVENT: {
               target: 'paused',
               actions: 'castEvent',
@@ -168,6 +202,23 @@
             baselineTime: ctx.events[0].timestamp + timeOffset,
           };
         }),
+
+        playSingleEvent(ctx, event) {
+          if (event.type !== 'PLAY_SINGLE_EVENT') {
+            return;
+          }
+
+          const { singleEvent } = event.payload;
+
+          const neededEvents = discardPriorSnapshotsToEvent(
+            ctx.events,
+            singleEvent,
+          );
+
+          applyEventsSynchronously(neededEvents);
+          emitter.emit(ReplayerEvents.Flush);
+        },
+
         play(ctx) {
           const { timer, events, baselineTime, lastPlayedEvent } = ctx;
           timer.clear();
@@ -209,7 +260,7 @@
                 doAction: () => {
                   castFn();
                 },
                 delay: event.delay!,
               });
             }
           }
@@ -271,7 +322,7 @@
                 doAction: () => {
                   castFn();
                 },
                 delay: event.delay!,
               });
             }
           }

packages/types/src/index.ts

@@ -651,6 +651,7 @@ export type Emitter = {
   on(type: string, handler: Handler): void;
   emit(type: string, event?: unknown): void;
   off(type: string, handler: Handler): void;
+  all: Map<string | symbol, Handler[]>;
 };
 
 export type Arguments<T> = T extends (...payload: infer U) => unknown
@@ -675,6 +676,7 @@ export enum ReplayerEvents {
   EventCast = 'event-cast',
   CustomEvent = 'custom-event',
   Flush = 'flush',
+  FlushEnd = 'flush-end',
   StateChange = 'state-change',
   PlayBack = 'play-back',
   Destroy = 'destroy',