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

packages/rrweb/src/replay/index.ts

@@ -482,6 +482,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 +491,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 +563,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 +580,9 @@
       ?.getElementsByTagName('html')[0]
       ?.classList.remove('rrweb-paused');
     this.emitter.emit(ReplayerEvents.Start);
+    if (this.config.skipInactive) {
+      this.reevaluateFastForward();
+    }
   }
 
   public pause(timeOffset?: number) {
@@ -577,6 +592,9 @@
     if (typeof timeOffset === 'number') {
       this.play(timeOffset);
       this.service.send({ type: 'PAUSE' });
+      if (this.config.skipInactive) {
+        this.reevaluateFastForward();
+      }
     }
     const iframeDoc = getIFrameContentDocument(this.iframe);
     iframeDoc?.getElementsByTagName('html')[0]?.classList.add('rrweb-paused');
@@ -633,6 +651,77 @@
     this.cache = createCache();
   }
 
+  private binarySearchEventIndex(
+    events: eventWithTime[],
+    currentEventTime: number,
+  ): number {
+    let left = 0,
+      right = events.length - 1;
+    let result = -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;
+  }
+
+  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 using binary search (O(log n))
+    const currentEventIndex = this.binarySearchEventIndex(
+      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 +1179,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 +1675,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;
       }