Subscribe to MetaData change

src/replay/index.ts

@@ -30,6 +30,7 @@ import {
   LogReplayConfig,
   logData,
   ReplayLogger,
+  MetaDataSubscriberCb
 } from '../types';
 import {
   mirror,
@@ -124,6 +125,7 @@ export class Replayer {
   private firstPlayedEvent: eventWithTime | null = null;
 
   private newDocumentQueue: addedNodeMutation[] = [];
+  private metaDataSubscriber: MetaDataSubscriberCb;
 
   constructor(
     events: Array<eventWithTime | string>,
@@ -154,6 +156,7 @@ export class Replayer {
       this.config.logConfig.replayLogger = this.getConsoleLogger();
     }
 
+    this.eventAddedCb = this.eventAddedCb.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.getCastFn = this.getCastFn.bind(this);
     this.emitter.on(ReplayerEvents.Resize, this.handleResize as Handler);
@@ -217,6 +220,7 @@ export class Replayer {
       {
         getCastFn: this.getCastFn,
         emitter: this.emitter,
+        eventAddedCb: this.eventAddedCb
       },
     );
     this.service.start();
@@ -309,6 +313,16 @@ export class Replayer {
     }
   }
 
+  private eventAddedCb(): void {
+    if (this.metaDataSubscriber) {
+      this.metaDataSubscriber(this.getMetaData());
+    }
+  }
+
+  public setMetaDataSubscriber(metaDataSubscriber: MetaDataSubscriberCb): void {
+    this.metaDataSubscriber = metaDataSubscriber;
+  } 
+
   public getMetaData(): playerMetaData {
     const firstEvent = this.service.state.context.events[0];
     const lastEvent = this.service.state.context.events[
@@ -378,11 +392,11 @@ export class Replayer {
     this.service.send({ type: 'TO_LIVE', payload: { baselineTime } });
   }
 
-  public addEvent(rawEvent: eventWithTime | string) {
+  public addEvent(rawEvent: eventWithTime | string): Promise<void> {
     const event = this.config.unpackFn
       ? this.config.unpackFn(rawEvent as string)
       : (rawEvent as eventWithTime);
-    Promise.resolve().then(() =>
+    return Promise.resolve().then(() =>
       this.service.send({ type: 'ADD_EVENT', payload: { event } }),
     );
   }

src/replay/machine.ts

@@ -78,10 +78,11 @@ export function discardPriorSnapshots(
 type PlayerAssets = {
   emitter: Emitter;
   getCastFn(event: eventWithTime, isSync: boolean): () => void;
+  eventAddedCb: () => void;
 };
 export function createPlayerService(
   context: PlayerContext,
-  { getCastFn, emitter }: PlayerAssets,
+  { getCastFn, emitter, eventAddedCb }: PlayerAssets,
 ) {
   const playerMachine = createMachine<PlayerContext, PlayerEvent, PlayerState>(
     {
@@ -262,7 +263,8 @@ export function createPlayerService(
               }
               events.splice(insertionIndex, 0, event);
             }
-
+
+            eventAddedCb();
             const isSync = event.timestamp < baselineTime;
             const castFn = getCastFn(event, isSync);
             if (isSync) {

src/types.ts

@@ -615,3 +615,5 @@ export type LogRecordOptions = {
   stringifyOptions?: StringifyOptions;
   logger?: Logger;
 };
+
+export type MetaDataSubscriberCb = (metaData: playerMetaData) => void;

test/replayer.test.ts

@@ -9,6 +9,7 @@ import {
   launchPuppeteer,
   sampleEvents as events,
   sampleStyleSheetRemoveEvents as stylesheetRemoveEvents,
+  extraEvents
 } from './utils';
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
 
@@ -33,6 +34,7 @@ describe('replayer', function (this: ISuite) {
     await page.goto('about:blank');
     await page.evaluate(this.code);
     await page.evaluate(`let events = ${JSON.stringify(events)}`);
+    await page.evaluate(`let extraEvents = ${JSON.stringify(extraEvents)}`);
     this.page = page;
 
     page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
@@ -181,4 +183,23 @@ describe('replayer', function (this: ISuite) {
     `);
     expect(status).to.equal('live');
   });
+
+  it('invokes the metaDataSubscriber callback when new events are added', async () => {
+    const totalInvokations = await this.page.evaluate(`
+      async function evaluator() {
+        let totalMetaDataChangeInvokations = 0;
+        const { Replayer } = rrweb;
+        const replayer = new Replayer(events);
+        replayer.setMetaDataSubscriber((playerMetaData) => {
+          totalMetaDataChangeInvokations++;
+        });
+        for (extraEvent of extraEvents) {
+          await replayer.addEvent(extraEvent);
+        }
+        return totalMetaDataChangeInvokations;
+      }
+      evaluator();
+    `);
+    expect(totalInvokations).to.equal(3);
+  })
 });

test/utils.ts

@@ -203,6 +203,42 @@ export const sampleEvents: eventWithTime[] = [
   },
 ];
 
+export const extraEvents: eventWithTime[] = [
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.MouseInteraction,
+      type: MouseInteractions.Click,
+      id: 1,
+      x: 0,
+      y: 0,
+    },
+    timestamp: now + 4500,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.MouseInteraction,
+      type: MouseInteractions.Click,
+      id: 1,
+      x: 0,
+      y: 0,
+    },
+    timestamp: now + 5000,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.MouseInteraction,
+      type: MouseInteractions.Click,
+      id: 1,
+      x: 0,
+      y: 0,
+    },
+    timestamp: now + 5500,
+  }
+]
+
 export const sampleStyleSheetRemoveEvents: eventWithTime[] = [
   {
     type: EventType.DomContentLoaded,