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

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

Browse Source 
set pauseAnimation to true by default
This commit is contained in:
Lucky Feng
2020-11-27 16:16:18 +08:00
committed by GitHub
parent 8f3086c18c
commit 658999c6e0
4 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/replay/index.ts
View File

@@ -100,6 +100,7 @@ export class Replayer {
insertStyleRules: [], insertStyleRules: [],
triggerFocus: true, triggerFocus: true,
UNSAFE_replayCanvas: false, UNSAFE_replayCanvas: false,
pauseAnimation: true,
mouseTail: defaultMouseTailConfig, mouseTail: defaultMouseTailConfig,
}; };
this.config = Object.assign({}, defaultConfig, config); this.config = Object.assign({}, defaultConfig, config);
@@ -276,7 +277,9 @@ export class Replayer {
this.service.send({ type: 'PAUSE' }); this.service.send({ type: 'PAUSE' });
this.service.send({ type: 'PLAY', payload: { timeOffset } }); 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); this.emitter.emit(ReplayerEvents.Start);
} }
@@ -288,7 +291,9 @@ export class Replayer {
this.play(timeOffset); this.play(timeOffset);
this.service.send({ type: 'PAUSE' }); 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); this.emitter.emit(ReplayerEvents.Pause);
} }
@@ -494,9 +499,14 @@ export class Replayer {
const injectStylesRules = getInjectStyleRules( const injectStylesRules = getInjectStyleRules(
this.config.blockClass, this.config.blockClass,
).concat(this.config.insertStyleRules); ).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')) { 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++) { for (let idx = 0; idx < injectStylesRules.length; idx++) {
(styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx); (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx);

1
src/types.ts
View File

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

2
typings/replay/index.d.ts vendored
View File

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

4
typings/types.d.ts vendored
View File

@@ -113,6 +113,7 @@ export declare type recordOptions<T> = {
ignoreClass?: string; ignoreClass?: string;
maskAllInputs?: boolean; maskAllInputs?: boolean;
maskInputOptions?: MaskInputOptions; maskInputOptions?: MaskInputOptions;
maskInputFn?: MaskInputFn;
inlineStylesheet?: boolean; inlineStylesheet?: boolean;
hooks?: hooksParam; hooks?: hooksParam;
packFn?: PackFn; packFn?: PackFn;
@@ -132,6 +133,7 @@ export declare type observerParam = {
blockClass: blockClass; blockClass: blockClass;
ignoreClass: string; ignoreClass: string;
maskInputOptions: MaskInputOptions; maskInputOptions: MaskInputOptions;
maskInputFn?: MaskInputFn;
inlineStylesheet: boolean; inlineStylesheet: boolean;
styleSheetRuleCb: styleSheetRuleCallback; styleSheetRuleCb: styleSheetRuleCallback;
canvasMutationCb: canvasMutationCallback; canvasMutationCb: canvasMutationCallback;
@@ -302,6 +304,7 @@ export declare type playerConfig = {
insertStyleRules: string[]; insertStyleRules: string[];
triggerFocus: boolean; triggerFocus: boolean;
UNSAFE_replayCanvas: boolean; UNSAFE_replayCanvas: boolean;
pauseAnimation?: boolean;
mouseTail: boolean | { mouseTail: boolean | {
duration?: number; duration?: number;
lineCap?: string; lineCap?: string;
@@ -350,4 +353,5 @@ export declare enum ReplayerEvents {
Flush = "flush", Flush = "flush",
StateChange = "state-change" StateChange = "state-change"
} }
export declare type MaskInputFn = (text: string) => string;
export {}; export {};