working

Author: charlie632

packages/rrweb/src/replay/index.ts

@@ -525,6 +525,25 @@ export class Replayer {
     this.emitter.emit(ReplayerEvents.Start);
   }
 
+  public playSingleEvent(eventIndex: number) {
+    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' });

packages/rrweb/src/replay/machine.ts

@@ -28,6 +28,12 @@ export type PlayerEvent =
         timeOffset: number;
       };
     }
+  | {
+      type: 'PLAY_SINGLE_EVENT';
+      payload: {
+        singleEvent: number;
+      };
+    }
   | {
       type: 'CAST_EVENT';
       payload: {
@@ -78,6 +84,30 @@ export function discardPriorSnapshots(
   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 @@ export function createPlayerService(
               target: 'playing',
               actions: ['recordTimeOffset', 'play'],
             },
+            PLAY_SINGLE_EVENT: {
+              target: 'paused',
+              actions: ['playSingleEvent'],
+            },
             CAST_EVENT: {
               target: 'paused',
               actions: 'castEvent',
@@ -168,6 +202,24 @@ export function createPlayerService(
             baselineTime: ctx.events[0].timestamp + timeOffset,
           };
         }),
+
+        playSingleEvent(ctx, event) {
+          if (event.type !== 'PLAY_SINGLE_EVENT') {
+            return;
+          }
+
+          const { singleEvent } = event.payload;
+
+          const neededEvents2 = discardPriorSnapshotsToEvent(
+            ctx.events,
+            singleEvent,
+          );
+
+          applyEventsSynchronously(neededEvents2);
+          emitter.emit(ReplayerEvents.Flush);
+          // emitter.emit(ReplayerEvents.Finish);
+        },
+
         play(ctx) {
           const { timer, events, baselineTime, lastPlayedEvent } = ctx;
           timer.clear();