feat: add an option to determine whether to pause CSS animation when …

…playback is paused (#428) set pauseAnimation to true by default
rrweb-io · Nov 27, 2020 · 0d2048f · 0d2048f
1 parent 01f17fa
commit 0d2048f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/src/replay/index.ts b/src/replay/index.ts
@@ -121,6 +121,7 @@ export class Replayer {
       insertStyleRules: [],
       triggerFocus: true,
       UNSAFE_replayCanvas: false,
+      pauseAnimation: true,
       mouseTail: defaultMouseTailConfig,
     };
     this.config = Object.assign({}, defaultConfig, config);
@@ -294,6 +295,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.emitter.emit(ReplayerEvents.Start);
   }
 
@@ -305,6 +309,9 @@ export class Replayer {
       this.play(timeOffset);
       this.service.send({ type: 'PAUSE' });
     }
+    this.iframe.contentDocument
+      ?.getElementsByTagName('html')[0]
+      .classList.add('rrweb-paused');
     this.emitter.emit(ReplayerEvents.Pause);
   }
 
@@ -510,6 +517,15 @@ export class Replayer {
     const injectStylesRules = getInjectStyleRules(
       this.config.blockClass,
     ).concat(this.config.insertStyleRules);
+    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');
+    }
     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
@@ -409,6 +409,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
@@ -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;

diff --git a/typings/types.d.ts b/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 {};