Ensure animations don't continue playing when we've paused playback (#417)
This commit is contained in:
@@ -276,6 +276,7 @@ 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.emitter.emit(ReplayerEvents.Start);
|
this.emitter.emit(ReplayerEvents.Start);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -287,6 +288,7 @@ 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.emitter.emit(ReplayerEvents.Pause);
|
this.emitter.emit(ReplayerEvents.Pause);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -492,6 +494,10 @@ 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.service.state.matches('playing')) {
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user