From 729361e66b9e9695804ef2ddd35a08f1207b43f4 Mon Sep 17 00:00:00 2001 From: Antonio Villegas Date: Thu, 11 Apr 2024 12:20:24 +0200 Subject: [PATCH] Expose constant SKIP_TIME_THRESHOLD as inactivePeriodThreshold in replayer (#1408) Expose constant SKIP_TIME_THRESHOLD as `inactivePeriodThreshold` config setting in replayer --- guide.md | 1 + packages/rrweb-player/src/Controller.svelte | 2 +- packages/rrweb-player/src/utils.ts | 8 +++----- packages/rrweb/src/replay/index.ts | 4 ++-- packages/rrweb/src/types.ts | 1 + 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/guide.md b/guide.md index d7807bf00d..6298cdf772 100644 --- a/guide.md +++ b/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 | diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte index 5a352e6dd0..7e49df841e 100644 --- a/packages/rrweb-player/src/Controller.svelte +++ b/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, diff --git a/packages/rrweb-player/src/utils.ts b/packages/rrweb-player/src/utils.ts index 2a3f29219c..405dffa901 100644 --- a/packages/rrweb-player/src/utils.ts +++ b/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; diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts index ee493fec0e..82f913df69 100644 --- a/packages/rrweb/src/replay/index.ts +++ b/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; diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts index e815ad753b..10ffb62b43 100644 --- a/packages/rrweb/src/types.ts +++ b/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;