81b39384c8
* 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>
79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
import { eventWithTime, playerConfig } from 'rrweb/typings/types';
|
|
import { Replayer, mirror } from 'rrweb';
|
|
import { SvelteComponent } from 'svelte';
|
|
|
|
export type RRwebPlayerOptions = {
|
|
target: HTMLElement;
|
|
props: {
|
|
/**
|
|
* The events to replay.
|
|
* @default `[]`
|
|
*/
|
|
events: eventWithTime[];
|
|
/**
|
|
* The width of the replayer
|
|
* @defaultValue `1024`
|
|
*/
|
|
width?: number;
|
|
/**
|
|
* The height of the replayer
|
|
* @defaultValue `576`
|
|
*/
|
|
height?: number;
|
|
/**
|
|
* The maximum scale of the replayer (1 = 100%). Set to 0 for unlimited
|
|
* @defaultValue `1`
|
|
*/
|
|
maxScale?: number;
|
|
/**
|
|
* Whether to autoplay
|
|
* @defaultValue `true`
|
|
*/
|
|
autoPlay?: boolean;
|
|
/**
|
|
* The default speed to play at
|
|
* @defaultValue `1`
|
|
*/
|
|
speed?: number;
|
|
/**
|
|
* Speed options in UI
|
|
* @defaultValue `[1, 2, 4, 8]`
|
|
*/
|
|
speedOption?: number[];
|
|
/**
|
|
* Whether to show the controller UI
|
|
* @defaultValue `true`
|
|
*/
|
|
showController?: boolean;
|
|
/**
|
|
* Customize the custom events style with a key-value map
|
|
* @defaultValue `{}`
|
|
*/
|
|
tags?: Record<string, string>;
|
|
/**
|
|
* Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.
|
|
* @defaultValue `#D4D4D4`
|
|
*/
|
|
inactiveColor?: string;
|
|
} & Partial<playerConfig>;
|
|
};
|
|
|
|
export default class rrwebPlayer extends SvelteComponent {
|
|
constructor(options: RRwebPlayerOptions);
|
|
|
|
addEventListener(event: string, handler: (params: any) => unknown): void;
|
|
|
|
addEvent(event: eventWithTime): void;
|
|
getMetaData: Replayer['getMetaData'];
|
|
getReplayer: () => Replayer;
|
|
getMirror: () => typeof mirror;
|
|
|
|
toggle: () => void;
|
|
setSpeed: (speed: number) => void;
|
|
toggleSkipInactive: () => void;
|
|
triggerResize: () => void;
|
|
play: () => void;
|
|
pause: () => void;
|
|
goto: (timeOffset: number, play?: boolean) => void;
|
|
}
|