feat: add an option to determine whether to pause CSS animation when playback is paused (#428)

set pauseAnimation to true by default

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);

src/types.ts

@@ -404,6 +404,7 @@ export type playerConfig = {
   insertStyleRules: string[];
   triggerFocus: boolean;
   UNSAFE_replayCanvas: boolean;
+  pauseAnimation?: boolean;
   mouseTail:
     | boolean
     | {

typings/replay/index.d.ts

@@ -19,7 +19,7 @@ export declare class Replayer {
     private fragmentParentMap;
     private imageMap;
     constructor(events: Array<eventWithTime | string>, config?: Partial<playerConfig>);
-    on(event: string, handler: Handler): void;
+    on(event: string, handler: Handler): this;
     setConfig(config: Partial<playerConfig>): void;
     getMetaData(): playerMetaData;
     getCurrentTime(): number;

typings/types.d.ts

@@ -113,6 +113,7 @@ export declare type recordOptions<T> = {
     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 {};