Expose constant SKIP_TIME_THRESHOLD as skipTimeThreshold in replayer

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 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 @@
       root: document.body,
       loadTimeout: 0,
       skipInactive: false,
+      inactivePeriodThreshold: 10 * 1000,
       showWarning: true,
       showDebug: false,
       blockClass: 'rr-block',
@@ -692,7 +692,7 @@
                 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;
@@ -884,7 +884,7 @@
         sn?.type === NodeType.Element &&
         sn?.tagName.toUpperCase() === 'HTML'
       ) {
         const { documentElement, head } = iframeEl.contentDocument!;
         this.insertStyleRules(
           documentElement as HTMLElement | RRElement,
           head as HTMLElement | RRElement,
@@ -903,14 +903,14 @@
     };
 
     buildNodeWithSN(mutation.node, {
       doc: iframeEl.contentDocument! as Document,
       mirror: mirror as Mirror,
       hackCss: true,
       skipChild: false,
       afterAppend,
       cache: this.cache,
     });
     afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);
 
     for (const { mutationInQueue, builtNode } of collected) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -997,7 +997,7 @@
    * pause when there are some canvas drawImage args need to be loaded
    */
   private async preloadAllImages(): Promise<void[]> {
     let beforeLoadState = this.service.state;
     const stateHandler = () => {
       beforeLoadState = this.service.state;
     };
@@ -1032,8 +1032,8 @@
       const ctx = canvas.getContext('2d');
       const imgd = ctx?.createImageData(canvas.width, canvas.height);
       let d = imgd?.data;
       d = JSON.parse(data.args[0]) as Uint8ClampedArray;
       ctx?.putImageData(imgd!, 0, 0);
     }
   }
   private async deserializeAndPreloadCanvasEvents(
@@ -1370,7 +1370,7 @@
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
       this.usingVirtualDom = true;
       buildFromDom(this.iframe.contentDocument!, this.mirror, this.virtualDom);
       // If these legacy missing nodes haven't been resolved, they should be converted to virtual nodes.
       if (Object.keys(this.legacy_missingNodeRetryMap).length) {
         for (const key in this.legacy_missingNodeRetryMap) {
@@ -1487,7 +1487,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;
       }
 

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;