xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement: Inactive activity indicator on progress bar (#1039)

Browse Source 
* update utils.ts: add a tool function to detect inactive periods

* update Controller.svelte: add a fixed div element as an indicator

* update Controller.svelte: add one blank space at the end

* update Controller.svelte: add a variable inactivePeriods and use util function to get inactive periods

* update Controller.svelte: add width property for inactive activity indicators

* update Controller.svelte: combine calculation value with indicator UI

* update utils.ts: fix error https://github.com/HurricaHjz/rrweb_2120_ga_3/pull/5#discussion_r1008677230 and add comments

update Controller.svelte: apply Zihan's suggestion https://github.com/HurricaHjz/rrweb_2120_ga_3/pull/5#discussion_r1008678403

* update Controller.svelte: make the color of indicator customizable

update index.d.ts: add type definition for the color option

Co-authored-by: u7149141 <fengyun5264@outlook.com>
Co-authored-by: Jerry Zhang <u7305891@anu.edu.au>
Co-authored-by: fengyun5264 <115444501+fengyun5264@users.noreply.github.com>
Co-authored-by: Zihan Meng <u7354208@anu.edu.au>
Co-authored-by: HurricaHjz <105645379+HurricaHjz@users.noreply.github.com>
Co-authored-by: u6924169 <u6924169@anu.edu.au>
Co-authored-by: Majia0712 <55265314+MengZihan712@users.noreply.github.com>
This commit is contained in:
DexxDing
2022-11-01 01:17:35 +11:00
committed by GitHub
parent 2286c11912
commit bdd89400d2
4 changed files with 142 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/rrweb-player/src/utils.ts
View File

@@ -15,6 +15,9 @@ declare global {
}
}
import { EventType, IncrementalSource } from 'rrweb';
import type { eventWithTime } from 'rrweb/typings/types';
export function inlineCss(cssObj: Record<string, string>): string {
let style = '';
Object.keys(cssObj).forEach((key) => {
@@ -141,3 +144,40 @@ export function typeOf(
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
return map[toString.call(obj)];
}
/**
* Forked from 'rrweb' replay/index.ts. The original function is not exported.
* Determine whether the event is a user interaction event
* @param event - event to be determined
* @returns true if the event is a user interaction event
*/
function isUserInteraction(event: eventWithTime): boolean {
if (event.type !== EventType.IncrementalSnapshot) {
return false;
}
return (
event.data.source > IncrementalSource.Mutation &&
event.data.source <= IncrementalSource.Input
);
}
// 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
* @returns periods of time consist with [start time, end time]
*/
export function getInactivePeriods(events: eventWithTime[]) {
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) {
inactivePeriods.push([lastActiveTime, event.timestamp]);
}
lastActiveTime = event.timestamp;
}
return inactivePeriods;
}