diff --git a/src/replay/index.ts b/src/replay/index.ts index 09a45944..e2163fea 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -100,6 +100,7 @@ export class Replayer { insertStyleRules: [], triggerFocus: true, UNSAFE_replayCanvas: false, + pauseAnimation: true, mouseTail: defaultMouseTailConfig, }; this.config = Object.assign({}, defaultConfig, config); @@ -276,7 +277,9 @@ export class Replayer { this.service.send({ type: 'PAUSE' }); this.service.send({ type: 'PLAY', payload: { timeOffset } }); } - this.iframe.contentDocument.getElementsByTagName('html')[0].classList.remove('rrweb-paused'); + this.iframe.contentDocument + ?.getElementsByTagName('html')[0] + .classList.remove('rrweb-paused'); this.emitter.emit(ReplayerEvents.Start); } @@ -288,7 +291,9 @@ export class Replayer { this.play(timeOffset); this.service.send({ type: 'PAUSE' }); } - this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused'); + this.iframe.contentDocument + ?.getElementsByTagName('html')[0] + .classList.add('rrweb-paused'); this.emitter.emit(ReplayerEvents.Pause); } @@ -494,9 +499,14 @@ export class Replayer { const injectStylesRules = getInjectStyleRules( this.config.blockClass, ).concat(this.config.insertStyleRules); - injectStylesRules.push('html.rrweb-paused * { animation-play-state: paused !important; }'); + if (this.config.pauseAnimation) + injectStylesRules.push( + 'html.rrweb-paused * { animation-play-state: paused !important; }', + ); if (!this.service.state.matches('playing')) { - this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused'); + this.iframe.contentDocument + .getElementsByTagName('html')[0] + .classList.add('rrweb-paused'); } for (let idx = 0; idx < injectStylesRules.length; idx++) { (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx); diff --git a/src/types.ts b/src/types.ts index 2beba8dc..3f503009 100644 --- a/src/types.ts +++ b/src/types.ts @@ -404,6 +404,7 @@ export type playerConfig = { insertStyleRules: string[]; triggerFocus: boolean; UNSAFE_replayCanvas: boolean; + pauseAnimation?: boolean; mouseTail: | boolean | { diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts index 55c4a1f2..9ce4f55a 100644 --- a/typings/replay/index.d.ts +++ b/typings/replay/index.d.ts @@ -19,7 +19,7 @@ export declare class Replayer { private fragmentParentMap; private imageMap; constructor(events: Array, config?: Partial); - on(event: string, handler: Handler): void; + on(event: string, handler: Handler): this; setConfig(config: Partial): void; getMetaData(): playerMetaData; getCurrentTime(): number; diff --git a/typings/types.d.ts b/typings/types.d.ts index cdb25b01..0c3f0330 100644 --- a/typings/types.d.ts +++ b/typings/types.d.ts @@ -113,6 +113,7 @@ export declare type recordOptions = { ignoreClass?: string; maskAllInputs?: boolean; maskInputOptions?: MaskInputOptions; + maskInputFn?: MaskInputFn; inlineStylesheet?: boolean; hooks?: hooksParam; packFn?: PackFn; @@ -132,6 +133,7 @@ export declare type observerParam = { blockClass: blockClass; ignoreClass: string; maskInputOptions: MaskInputOptions; + maskInputFn?: MaskInputFn; inlineStylesheet: boolean; styleSheetRuleCb: styleSheetRuleCallback; canvasMutationCb: canvasMutationCallback; @@ -302,6 +304,7 @@ export declare type playerConfig = { insertStyleRules: string[]; triggerFocus: boolean; UNSAFE_replayCanvas: boolean; + pauseAnimation?: boolean; mouseTail: boolean | { duration?: number; lineCap?: string; @@ -350,4 +353,5 @@ export declare enum ReplayerEvents { Flush = "flush", StateChange = "state-change" } +export declare type MaskInputFn = (text: string) => string; export {};