fix(replay): handle fast forwarding for arbitrary position jumps in replayer

packages/rrweb/src/replay/index.ts

@@ -102,6 +102,29 @@
 
 const REPLAY_CONSOLE_PREFIX = '[replayer]';
 
+export function getCurrentEventIndex(
+  events: eventWithTime[],
+  currentEventTime: number,
+): number {
+  // Use binary search (O(log n)) to find the current event index
+  let result = -1;
+  if (events.length === 0) {
+    return result;
+  }
+  let left = 0,
+    right = events.length - 1;
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    if (events[mid].timestamp <= currentEventTime) {
+      result = mid;
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  return result;
+}
+
 const defaultMouseTailConfig = {
   duration: 500,
   lineCap: 'round',
@@ -482,6 +505,7 @@
   }
 
   public setConfig(config: Partial<playerConfig>) {
+    const previousSkipInactive = this.config.skipInactive;
     Object.keys(config).forEach((key) => {
       const newConfigValue = config[key as keyof playerConfig];
       (this.config as Record<keyof playerConfig, typeof newConfigValue>)[
@@ -490,6 +514,11 @@
     });
     if (!this.config.skipInactive) {
       this.backToNormal();
+    } else if (
+      previousSkipInactive === false &&
+      this.config.skipInactive === true
+    ) {
+      this.reevaluateFastForward();
     }
     if (typeof config.speed !== 'undefined') {
       this.speedService.send({
@@ -557,6 +586,12 @@
    * @param timeOffset - number
    */
   public play(timeOffset = 0) {
+    if (
+      this.config.skipInactive &&
+      this.speedService.state.matches('skipping')
+    ) {
+      this.backToNormal();
+    }
     if (this.service.state.matches('paused')) {
       this.service.send({ type: 'PLAY', payload: { timeOffset } });
     } else {
@@ -568,6 +603,9 @@
       ?.getElementsByTagName('html')[0]
       ?.classList.remove('rrweb-paused');
     this.emitter.emit(ReplayerEvents.Start);
+    if (this.config.skipInactive) {
+      this.reevaluateFastForward();
+    }
   }
 
   public pause(timeOffset?: number) {
@@ -633,6 +671,54 @@
     this.cache = createCache();
   }
 
+  private reevaluateFastForward(): void {
+    if (!this.config.skipInactive) {
+      return;
+    }
+
+    // Clear stale state
+    this.nextUserInteractionEvent = null;
+
+    // Get current time and convert to event-relative time
+    const events = this.service.state.context.events;
+    const firstEvent = events[0];
+    if (!firstEvent) {
+      return;
+    }
+    const currentEventTime = firstEvent.timestamp + this.getCurrentTime();
+
+    // Find current event index
+    const currentEventIndex = getCurrentEventIndex(events, currentEventTime);
+    if (currentEventIndex === -1) {
+      return;
+    }
+
+    // Find next user interaction event starting from the current event index
+    const currentEvent = events[currentEventIndex];
+    const threshold =
+      this.config.inactivePeriodThreshold *
+      this.speedService.state.context.timer.speed;
+    for (let i = currentEventIndex + 1; i < events.length; i++) {
+      const event = events[i];
+      if (this.isUserInteraction(event)) {
+        const gapTime = event.timestamp - currentEvent.timestamp;
+        // Fast forward if the gap time is greater than the threshold
+        if (gapTime > threshold) {
+          this.nextUserInteractionEvent = event;
+          const payload = {
+            speed: Math.min(
+              Math.round(gapTime / SKIP_TIME_INTERVAL),
+              this.config.maxSpeed,
+            ),
+          };
+          this.speedService.send({ type: 'FAST_FORWARD', payload });
+          this.emitter.emit(ReplayerEvents.SkipStart, payload);
+        }
+        break;
+      }
+    }
+  }
+
   private setupDom() {
     this.wrapper = document.createElement('div');
     this.wrapper.classList.add('replayer-wrapper');
@@ -1090,7 +1176,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(
@@ -1586,7 +1672,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;
       }