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

fixes REPLAY-667
fixes REPLAY-558

Previously, fast forwarding through a replay was buggy and inconsistent
if you scrub or jump positions. This is because when users scrub or jump
to arbitrary timestamps, the cached nextUserInteractionEvent and state
become stale and prevent proper re-evaluation of fast forwarding.

We now extend the Replayer class by adding a private function
reevaluateFastForward that will handle arbitrary position jumps.
reevaluateFastForward finds the current event index using binary search,
scans forward to find the next user interaction position, and calculates
the gap of inactivity between them. If the gap is large enough, fast
forwarding is triggered. We call this function if we jump/scrub to a new
position, if the skipInactive config changes, and on starting playback.

Before: 
- Large period of inactivity at start never fast fowards
- Clicking to a breadcrumb triggers fastforwarding, but scrubbing or
jumping to that same area doesn't
- Scrubbing back while fastforwarding within the same period of
inactivity loses the fastforwarding but the badge stays up


https://github.com/user-attachments/assets/eac9e993-0946-4666-a40d-239679013c46

After: 
- Correctly fast forward at the start
- Scrubbing or jumping to any position triggers the correct
fastforwarding behavior, and the badge is consistent


https://github.com/user-attachments/assets/7700da8a-ed3a-4ca0-9ccb-4fd54fb5be45

Author: srest2021

packages/rrweb/src/replay/index.ts

@@ -102,6 +102,29 @@ const mitt = mittProxy.default || mittProxy;
 
 const REPLAY_CONSOLE_PREFIX = '[replayer]';
 
+export function getEventIndex(
+  events: eventWithTime[],
+  eventTime: number,
+): number {
+  // Use binary search (O(log n)) to find the index of the event at or before the given time
+  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 <= eventTime) {
+      result = mid;
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  return result;
+}
+
 const defaultMouseTailConfig = {
   duration: 500,
   lineCap: 'round',
@@ -482,6 +505,7 @@ export class Replayer {
   }
 
   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 @@ export class Replayer {
     });
     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 @@ export class Replayer {
    * @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 @@ export class Replayer {
       ?.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 @@ export class Replayer {
     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 = getEventIndex(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');