Expose constant SKIP_TIME_THRESHOLD as inactivePeriodThreshold in replayer (#1408)

Expose constant SKIP_TIME_THRESHOLD as `inactivePeriodThreshold` config setting in replayer

Author: avillegasn

guide.md

@@ -301,6 +301,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
 | root                | document.body | the root element of replayer                                                                                                                                                                                                   |
 | loadTimeout         | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
 | skipInactive        | false         | whether to skip inactive time                                                                                                                                                                                                  |
+| inactivePeriodThreshold   | 10000         | the threshold in milliseconds for what should be considered an inactive period                                                                                                                                                                                                  |
 | showWarning         | true          | whether to print warning messages during replay                                                                                                                                                                                |
 | showDebug           | false         | whether to print debug messages during replay                                                                                                                                                                                  |
 | blockClass          | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |

packages/rrweb-player/src/Controller.svelte

@@ -114,7 +114,7 @@
       const totalEvents = context.events.length;
       const start = context.events[0].timestamp;
       const end = context.events[totalEvents - 1].timestamp;
-      const periods = getInactivePeriods(context.events);
+      const periods = getInactivePeriods(context.events, replayer.config.inactivePeriodThreshold);
       // calculate the indicator width.
       const getWidth = (
         startTime: number,

packages/rrweb-player/src/utils.ts

@@ -161,20 +161,18 @@ function isUserInteraction(event: eventWithTime): boolean {
   );
 }
 
-// Forked from 'rrweb' replay/index.ts. A const threshold of inactive time.
-const SKIP_TIME_THRESHOLD = 10 * 1000;
-
 /**
  * Get periods of time when no user interaction happened from a list of events.
  * @param events - all events
+ * @param inactivePeriodThreshold - threshold of inactive time in milliseconds
  * @returns periods of time consist with [start time, end time]
  */
-export function getInactivePeriods(events: eventWithTime[]) {
+export function getInactivePeriods(events: eventWithTime[], inactivePeriodThreshold: number) {
   const inactivePeriods: [number, number][] = [];
   let lastActiveTime = events[0].timestamp;
   for (const event of events) {
     if (!isUserInteraction(event)) continue;
-    if (event.timestamp - lastActiveTime > SKIP_TIME_THRESHOLD) {
+    if (event.timestamp - lastActiveTime > inactivePeriodThreshold) {
       inactivePeriods.push([lastActiveTime, event.timestamp]);
     }
     lastActiveTime = event.timestamp;

packages/rrweb/src/replay/index.ts

@@ -82,7 +82,6 @@ import './styles/style.css';
 import canvasMutation from './canvas';
 import { deserializeArg } from './canvas/deserialize-args';
 
-const SKIP_TIME_THRESHOLD = 10 * 1000;
 const SKIP_TIME_INTERVAL = 5 * 1000;
 
 // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734
@@ -179,6 +178,7 @@ export class Replayer {
       root: document.body,
       loadTimeout: 0,
       skipInactive: false,
+      inactivePeriodThreshold: 10 * 1000,
       showWarning: true,
       showDebug: false,
       blockClass: 'rr-block',
@@ -692,7 +692,7 @@ export class Replayer {
                 if (
                   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                   _event.delay! - event.delay! >
-                  SKIP_TIME_THRESHOLD *
+                  this.config.inactivePeriodThreshold *
                     this.speedService.state.context.timer.speed
                 ) {
                   this.nextUserInteractionEvent = _event;

packages/rrweb/src/types.ts

@@ -170,6 +170,7 @@ export type playerConfig = {
   root: Element;
   loadTimeout: number;
   skipInactive: boolean;
+  inactivePeriodThreshold: number;
   showWarning: boolean;
   showDebug: boolean;
   blockClass: string;