[HIG-2114] add replace events function for use by chunking (#67)

src/replay/index.ts

@@ -505,6 +505,18 @@ export class Replayer {
     );
   }
 
+  public replaceEvents(events: eventWithTime[]) {
+    for (const event of events) {
+      if (indicatesTouchDevice(event)) {
+        this.mouse.classList.add('touch-device');
+        break;
+      }
+    }
+    Promise.resolve().then(() =>
+      this.service.send({ type: 'REPLACE_EVENTS', payload: { events } }),
+    );
+  }
+
   public enableInteract() {
     this.iframe.setAttribute('scrolling', 'auto');
     this.iframe.style.pointerEvents = 'auto';

src/replay/machine.ts

@@ -38,6 +38,12 @@ export type PlayerEvent =
         event: eventWithTime;
       };
     }
+  | {
+      type: 'REPLACE_EVENTS';
+      payload: {
+        events: eventWithTime[];
+      };
+    }
   | {
       type: 'END';
     };
@@ -107,6 +113,10 @@ export function createPlayerService(
               target: 'playing',
               actions: ['addEvent'],
             },
+            REPLACE_EVENTS: {
+              target: 'playing',
+              actions: ['replaceEvents'],
+            },
           },
         },
         paused: {
@@ -127,6 +137,10 @@ export function createPlayerService(
               target: 'paused',
               actions: ['addEvent'],
             },
+            REPLACE_EVENTS: {
+              target: 'paused',
+              actions: ['replaceEvents'],
+            },
           },
         },
         live: {
@@ -234,6 +248,32 @@ export function createPlayerService(
             return Date.now();
           },
         }),
+        replaceEvents: assign((ctx, machineEvent) => {
+          const { events: curEvents, timer, baselineTime } = ctx;
+          if (machineEvent.type === 'REPLACE_EVENTS') {
+            const { events: newEvents } = machineEvent.payload;
+            curEvents.length = 0;
+            const actions: actionWithDelay[] = [];
+            for (const event of newEvents) {
+              addDelay(event, baselineTime);
+              curEvents.push(event);
+              if (event.timestamp >= baselineTime) {
+                const castFn = getCastFn(event, false);
+                actions.push({
+                  doAction: () => {
+                    castFn();
+                  },
+                  delay: event.delay!,
+                });
+              }
+            }
+
+            if (timer.isActive()) {
+              timer.replaceActions(actions);
+            }
+          }
+          return { ...ctx, events: curEvents };
+        }),
         addEvent: assign((ctx, machineEvent) => {
           const { baselineTime, timer, events } = ctx;
           if (machineEvent.type === 'ADD_EVENT') {

src/replay/timer.ts

@@ -33,6 +33,11 @@ export class Timer {
     this.actions = this.actions.concat(actions);
   }
 
+  public replaceActions(actions: actionWithDelay[]) {
+    this.actions.length = 0;
+    this.actions.splice(0, 0, ...actions)
+  }
+
   public start() {
     this.timeOffset = 0;
     let lastTimestamp = performance.now();

typings/replay/index.d.ts

@@ -37,6 +37,7 @@ export declare class Replayer {
     resume(timeOffset?: number): void;
     startLive(baselineTime?: number): void;
     addEvent(rawEvent: eventWithTime | string): void;
+    replaceEvents(events: eventWithTime[]): void;
     enableInteract(): void;
     disableInteract(): void;
     private setupDom;

typings/replay/machine.d.ts

@@ -30,6 +30,11 @@ export declare type PlayerEvent = {
     payload: {
         event: eventWithTime;
     };
+} | {
+    type: 'REPLACE_EVENTS';
+    payload: {
+        event: eventWithTime[];
+    };
 } | {
     type: 'END';
 };